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

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

4 Replies 1 reply marked as answer

DG Durga Gopalakrishnan Syncfusion Team April 12, 2021 02:41 PM UTC

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


KG Kushal Gosar April 13, 2021 05:45 AM UTC

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


SM Srihari Muthukaruppan Syncfusion Team April 14, 2021 02:30 PM UTC

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   



DG Durga Gopalakrishnan Syncfusion Team April 19, 2021 12:36 PM UTC

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 

 




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

Regards, 
Durga G 


Marked as answer
Loader.
Up arrow icon