Why is HighCharts reordering my series?

Question

I use HighCharts to render a horizontal bar chart in the form of a stack, and it works fine, except that by default HighCharts changes the order of my serial data.

http://jsfiddle.net/U8nZ6/

As you can see in the demo, despite the fact that $ 20k is the first line of the data1 / data2 array, this is the last piece of each bar (all the way to the right). I would like it to be alright, so I tried a couple of things:

1) Display a chart with an array of .reverse() d. You can include these lines in the above demonstration to see that the result of this is that the colors do not line up, as each chart has a different number of entries, so this will not work (and there should not be the only way to do this , I'm sure)

2) Use xAxis.reversed = true . This puts it in the correct order with the corresponding colors, but then the legend changes to the opposite (from 100% to 0%), and it animates from right to left.

Is there another way?

Answer 1

Well, assuming there is no alternative, here is what I went if someone came across this via Google:

Using option 2 described above (axis change), I just changed the labels through the formatter as the reverse.

In my case, since this is a percentage (0-100), I simply put:

labels: { formatter: function() { return Math.abs(this.value - 100) } }

Answer 2

It looks like there is a reverseStacks option ( http://api.highcharts.com/highcharts#yAxis.reversedStacks ), which defaults to true for bar charts. You might want to set the value to false in the code.

I noticed that your JSFiddle specifically requests Highcharts version 2.3.5, in which this option does not seem to exist.

Answer 3

I had a similar problem. After trying out the different options, I finished setting up the series index before rendering the chart. Common code:

 if (options.chart.type === 'bar') { for (var i = 0; i < options.series.length; i++) { options.series[i].index = options.series.length - 1 - i; options.series[i].legendIndex = i; } } 

Updated jsFiddle for your example: http://jsfiddle.net/U8nZ6/23/

Answer 4

In case someone is still looking for it. I used reverseed: true in my legend.

 legend: { align: 'right', x: -30, verticalAlign: 'top', y: 25, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false, reversed: true // right here! }