How to set maximumLabelWidth as auto so that it takes the width of the bar

[Kushal Gosar]

Hi,

I want to show the label of X-axis as trim if it goes beyond the bar width. The problem is some time if there is single bar the width is more in case of multiple bars the width is less. hence i am unable to set maximumLabelWidth as fixed width. How can i achieve it ?

Thanks,

Kushal

[Durga Gopalakrishnan]

Hi Kushal, 

Greetings from Syncfusion. 

We have validated your reported scenario. By default, axis labels will be located inside the distance between the tick lines, regardless of the bar width. All axis labels will be trimmed to the default maximumLabelWidth 34px when enableTrim is enabled. Please provide us with more information about your requirement (including any video or image references) so that we can better understand it. 

Regards, 

Durga G

[Kushal Gosar]

Hi,

I have attached two image for the reference. In first image when I have multiple bar the label are perfect, but when I have single bar the label width is still 34px default. I want the label to take all the space as much as possible. Anyway to achieve it ?

Thanks,

Kushal

Attachment: Screenshot_from_20210413_110_99ff7195.zip

[Srihari Muthukaruppan]

Hi Kushal, 

 

Sorry for the inconvenience. 

 

We don’t have direct support to achieve your requirement. We are working on providing workaround solution to achieve your requirement. Hence we will update the status within two business days (April 16 2021). We appreciate your patience until then. 

 

Regards, 

Srihari M   

[Durga Gopalakrishnan]

Hi Kushal, 

As of now, we don’t have option to customize axis labels width based on bar width. We request you to use labelIntersectAction as Trim to trim axis labels when it overlaps with one another. We have attached sample for your reference.  

Code Snippet 

public primaryXAxis: Object = { 

    labelIntersectAction: "Trim" 

}; 

Screenshot 

 

Sample : https://stackblitz.com/edit/angular-p7rtwi 

UG : https://ej2.syncfusion.com/angular/documentation/chart/axis-labels/#smart-axis-labels 

API : https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel/#labelintersectaction 

If provided suggestion doesn’t meet your requirement, please revert us. 

Regards, 

Durga G