We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Stacked Bar xAxis Left Align Labels

How do I left align the X-Axis Labels on a Stacked Bar Chart?
I've tried:
primaryXAxis:{labelStyle:{textAlignment:'Left', size:'18px', fontWeight:'bold'}, valueType:'Category'}
and has no effect.


3 Replies

BP Baby Palanidurai Syncfusion Team April 29, 2019 06:23 AM UTC

Hi Jab, 

Greetings from Syncfusion. 

We have analyzed your query. As of now, we are not having left text alignment for axis. But as a workaround, we can achieve your requirement by using annotations feature. We have prepared a sample based on your requirement. In that sample, we have moved the chart margin to 60px and disable the axis labels. Then we have added the custom text using annotations. For more information about annotations, kindly find the below documentation link, 

Code snippet:   
<ejs-chart style='display:block;' align='center' id='chartcontainer' [margin]='margin' 
          <e-annotation content="<div>Jan</div>" x=20 y=350 coordinateUnits='Pixel'></e-annotation> 
          <e-annotation content="<div>Feb</div>" x=20 y=250 coordinateUnits='Pixel'></e-annotation> 
          <e-annotation content="<div>Mar</div>" x=20 y=150 coordinateUnits='Pixel'></e-annotation> 
          <e-annotation content="<div>Apr</div>" x=20 y=50 coordinateUnits='Pixel'></e-annotation> 

public primaryXAxis: Object = { 
    valueType: 'Category', 
    labelStyle: {  
      size: '0px' // disable the axis labels 
  public margin: Object = { 
    left: 60  


Kindly revert us, if you have any concerns. 


JA jab April 29, 2019 02:09 PM UTC

Thanks for your reply.  

The workaround has static label text and positioning.  Can you suggest a way to make this dynamic? 

The label text is in the data and placement needs to be relative to the respective bar.  

I'm open to any suggestions including CSS or post-render hacks -as I;ve spent way too much time on this simple requirement at this point.


BP Baby Palanidurai Syncfusion Team April 30, 2019 05:49 PM UTC

Hi Jab, 

We have analyzed your query. We can achieve your requirement by annotation coordinates as points. When using coordinates as points, annotations will render based on the points. Based on your requirement we have prepared a sample. In that sample, we have initially added annotations with axis minimum y value for annotations y and some dummy value for x. Then, we have set the points x for annotations x in the charts load event. Then we have change the annotation positions in the annotationRender event. 

Please find the below code snippet to achieve this requirement, 

ejs-chart (annotationRender)='annotationRender($event)' (load)='load($event)'> 
          <e-annotation content="<div>Jan</div>" x='xx' y=-10 coordinateUnits='Point'></e-annotation> 
          <e-annotation content="<div>Feb</div>" x='xx' y=-10 coordinateUnits='Point'></e-annotation> 
          <e-annotation content="<div>Mar</div>" x='xx' y=-10 coordinateUnits='Point'></e-annotation> 
          <e-annotation content="<div>Apr</div>" x='xx' y=-10 coordinateUnits='Point'></e-annotation> 

public load(args) { 
    let dataSource = args.chart.series[0].dataSource; 
    for (let i: number = 0; i < dataSource.length; i++) { 
      args.chart.annotations[i].x = dataSource[i].x; 
  public annotationRender(args) { 
     args.location.x -= 50; 

Kindly revert us, if you have any concerns. 


Live Chat Icon For mobile
Up arrow icon