Bar Chart - Align xAxis label to the left

[Gabriel Alva]

Hi. I'm trying to do something simple but I'm not sure if it's possible, couldn't find anything in documentation.

I need to align the labels for X Axis in Bar Chart to the left, so they start at the same place. I'll add an image as example.

Project sample:

https://stackblitz.com/edit/angularchartannotation-etcvxi

Kind regards,

Gabriel

[Durga Gopalakrishnan]

Hi Gabriel, 

We have validated your reported scenario with attached sample. We suggest you trim axis labels using maximum label width to achieve your requirement. We have specified enableTrim property as true and maximumLabelWidth as 122 based on your requirement for x axis in provided sample. Please check with the below code snippet and screenshot. 

Code Snippet 

 

public primaryXAxis: Object = { 

    maximumLabelWidth: 122, 

    enableTrim: true 

}; 

Screenshot 

 

Sample 

https://stackblitz.com/edit/angularchartannotation-87qh2g 

UG 

https://ej2.syncfusion.com/angular/documentation/chart/axis-labels/#trim-using-maximum-label-width 

Kindly revert us, if you have any concerns. 

Regards, 

Durga G 

[Gabriel Alva]

Hi, thank you for your answer. 
I checked the code and I have two issues with it:

First, this would work only in this case since you set the value for maximumLabelWidth.  It's not dynamic with any kind of value for x.

Second, is not exactly what I need. It's trimming part of the text, and I need it to be complete. Something like this:

Is there a way to accomplish this?

Kind regards

[Durga Gopalakrishnan]

Hi Gabriel, 

 

We have validated your reported scenario. We have prepared a workaround to achieve your requirement. In chart loaded event, we have specified text anchor as start and x position as 10 pixel to display axis labels from start location. Please check with the below code snippet and sample. 

 

Code Snippet 

 

public loaded(args: ILoadedEventArgs): void { 

      var axisLabelEle = document.getElementById("chartcontainer").querySelectorAll('[id*="chartcontainer0_AxisLabel_"]'); 

        for (var i = 0; i < axisLabelEle.length; i++) { 

          var ele = axisLabelEle[i]; 

          if(ele){ 

          ele.setAttribute('text-anchor', 'start'); 

          ele.setAttribute('x', '10'); 

          } 

        } 

    }; 

 

Screenshot 

 

Sample 

https://stackblitz.com/edit/angularchartannotation-vberwj 

Kindly revert us, if you have any concerns. 

Regards, 

Durga G 

[Gabriel Alva]

Hi Durga

Thank you very much, that solved our issue with the alignment of the text.

Regards,

Gabriel

[Srihari Muthukaruppan]

Hi Gabriel,  

 

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari M