Set width/min width of axis labels to align multiple charts vertically

Question

Is there a possibility to set something like a width or min width on the y axis labels ? What I want to achieve is that the chart areas of different charts get aligned vertically. Problem is that my charts have different text length of the labels and I found no possibility to align the size of the labels.

Durga Gopalakrishnan · Accepted Answer

Hi Michael, 
  
Greetings from Syncfusion. 
  
You can use maximumLabelWidth property to customize the width of axis labels. This will trim labels when axis label width exceeds the provided width. We have specified label width for below chart to achieve your requirement.  
  
Code Snippet :  
  




public primaryYAxis: Object = { 
       maximumLabelWidth: 21, 
       enableTrim: true 
} 
  
Screenshot :  
  
  
  
Sample : https://stackblitz.com/edit/angular-vcqdme-xdcsxk 
  
UG : https://ej2.syncfusion.com/angular/documentation/chart/axis-labels/#trim-using-maximum-label-width 
  
API Reference : https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel/#maximumlabelwidth 
  
Kindly revert us if you have any concerns. 
  
Regards, Durga G

Michael · Answer

Thanks for your answer.Is it possible to align without trimming the labels?

Durga Gopalakrishnan · Answer

Hi Michael, We suggest you to use margin left property to align the chart area left space. In the sample, we have specified margin for first chart alone. We have modified sample and attached for your reference. Code Snippet : public margin: Object = { left : 20 }; Screenshot : Sample : https://stackblitz.com/edit/angular-vcqdme-lwjadp UG : https://ej2.syncfusion.com/angular/documentation/chart/chart-appearance/#chart-area-customization Kindly revert us if you have any concerns. Regards, Durga G

Gary Wilkins · Answer

Hi,We are also facing the exact same problem with multiple charts not left-aligning. Unfortunately the suggested solution of adding a set margin to individual charts will not work in our case as the data is dynamic and therefore the Y axis values can and do range from say 0.01 to a few 10,000s.Is there any way to dynamically calculate the necessary margin based upon the 'maximum' length of the labels displayed on the Y axis ?

Durga Gopalakrishnan · Answer

Hi Gary, 

As of now, you can align axis lines of all charts using maximumLabelWidth or margin property only, we don’t have other options to achieve your requirement. You can specify highest maximum label width for all charts, so that axis labels won’t be trimmed and axis lines will be aligned on same position. Please let us know if you have any concerns. 

Regards, Durga G