Stacked Bar xAxis Left Align Labels

jab

Asked On April 26, 2019 11:06 PM UTC

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

Reply | Reply with quote

Baby Palanidurai [Syncfusion]

Replied On 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,

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.

Reply | Reply with quote

jab

Replied On 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.

Thanks.

Josh

Reply | Reply with quote

Baby Palanidurai [Syncfusion]

Replied On 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-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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144259	Apr 26,2019 11:06 PM UTC	Apr 30,2019 05:49 PM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US