CODEWITHSUNDEEP
javascripthighcharts
SpacePrez
SpacePrez

Reputation: 1086

Highcharts left alignment on x-axis

Trying to do a simple left alignment for the labels on the x-axis of a stacked bar chart using HighCharts API. No matter what label options I try nothing works.

I tried setting verticalAlignment: "bottom" and useHTML: "true" but depending upon the settings there's always something wrong. Is this a bug in HighCharts?

Here are some examples:

http://jsfiddle.net/ojbbry6c/ Properly left-aligned labels, but for some reason the chart overlaps the labels when set to left alignment?

labels: {
                verticalAlign: 'bottom',
                align: 'left',
                textAlign: 'left',
                useHTML: true,
            }

http://jsfiddle.net/2rx0zws1/1/ turn off left align and now the chart doesn't overlap, but the alignment is broken.

labels: {
                verticalAlign: 'bottom',
                //align: 'left',
                textAlign: 'left',
                useHTML: true,
            }

How do you make the labels on the x-axis left-align? For other chart types where the y-axis is on the left it works fine, but stackedbar alignment seems broken.

Upvotes: 3

Views: 1937

Answers (1)

chrismarx
chrismarx

Reputation: 12555

The comment by @Grzegorz Blachlínski is correct, this was an issue here:

https://github.com/highcharts/highcharts/issues/5286

But it's been resolved in highcharts v6+, and the solution is to use align in conjunction with "reserveSpace". This works:

align: "left",
reserveSpace: true,

Upvotes: 0

Related Questions