Stacked Bar xAxis Left Align Labels

[jab]

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.

TIA,

Josh

[Baby Palanidurai]

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, 

https://ej2.syncfusion.com/angular/documentation/chart/chart-annotations/ 

Code snippet:   

<ejs-chart style='display:block;' align='center' id='chartcontainer' [margin]='margin' 

        [primaryXAxis]='primaryXAxis'> 

        <e-annotations> 

          <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> 

          </e-annotations> 

</ejs-chart> 

public primaryXAxis: Object = { 

    valueType: 'Category', 

    labelStyle: {  

      size: '0px' // disable the axis labels 

    }, 

  }; 

  public margin: Object = { 

    left: 60  

  }; 

Screenshot: 

 

Sample link: https://stackblitz.com/edit/angular-yysrjt?file=app.component.html 

Kindly revert us, if you have any concerns. 

Regards, 

Baby. 

[jab]

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.

Thanks. 

Josh

[Baby Palanidurai]

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-annotations> 

          <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> 

          </e-annotations> 

        </ejs-chart> 

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; 

  } 

Sample link: https://stackblitz.com/edit/angular-yysrjt?file=app.component.ts 

Kindly revert us, if you have any concerns. 

Regards, 

Baby.