Bar chart label size

Question

Whether it is possible to block that the label affects the size of the chart?

When the primaryXAxis has setting labelIntersectAction: 'MultipleRows',, the chart is automatically smaller.

I have two bar charts next to each other and one has more elements and they are not equal because the labels reduce this one.

Durga Gopalakrishnan · Answer

Hi Lom, 

Greetings from Syncfusion. 

By default, 80% of space will be allocated for chart rendering and 20% will be allocated for legend from available space. As per your scenario, when legend size is more, the paging will be enabled automatically to view the legends. If you are still facing problem, we suggest you to specify height or width for legend based on its position. Please check with the below sample and screenshots. 





public legendSettings: Object = { 
        visible: true, 
        position: 'Bottom', 
        width: "40%" 
    }; 


  

Sample : https://stackblitz.com/edit/angular-l7dt44 

Kindly revert us if you have any concerns. 

Regards, 
Durga G

lom · Answer

Thank you for the answer and in the case of the legend I managed to set a fixed height while in the case of a bar chart where it is not a legend is a problem but labels under the chart?

Durga Gopalakrishnan · Answer

Hi Lom, 

We request you to specify labelIntersectAction as Trim or Hide for x axis, to view both chart axis labels in same height. Please check with the below sample and snippet. 





public primaryXAxis: Object = { 
        labelIntersectAction: 'Trim' 
    }; 


  

Sample : https://stackblitz.com/edit/angular-mnhpd5 

UG : https://ej2.syncfusion.com/angular/documentation/chart/axis-labels/#smart-axis-labels 

Kindy revert us if you have any concerns. 

Regards,  Durga G

Durga Gopalakrishnan · Answer

Hi Lom, 

As of now, we don’t have option to specify size for chart area alone, we can only able to customize height and width of whole chart. So, we request you to specify the size for axis labels to achieve your required scenario. Please check with the below sample and screenshot. 





public primaryXAxis: Object = { 
        labelIntersectAction: 'None', 
        labelStyle:{size: '11px'} 
    }; 


  

Sample : https://stackblitz.com/edit/angular-mnhpd5-qezu59 

Kindly revert us if you have any concerns. 

Regards, 
Durga G