Why does HighCharts reverse the order of my series?

Question

I'm using HighCharts to render a stacked percentage horizontal bar chart, and it works great except HighCharts reverses the order of my series data by default.

http://jsfiddle.net/U8nZ6/

As you can see in the demo, despite $20k being the first row of the data1/data2 array, it's the last chunk of each bar (all the way on the right). I'd like this to be in order, so I tried a couple things:

1) Render the chart with the array .reverse()d. You can enable those lines on the above demo to see that the result of that is that colors don't line up since there are a different number of records in each chart, so this won't work (and shouldn't be the only way to do this, I'm sure)

2) Use xAxis.reversed = true. This puts it in the right order with the colors matching, but then the legend is reversed (100% to 0%) and it animates right-to-left.

Is there another way around this?

Answer 1

Well, assuming there's no alternative, here's what I went with in case anyone stumbles upon this through Google:

Using option 2 described above (reversing the axis), I simply modified the labels via the formatter to be the inverse.

In my case, since it's percentage (0-100), I simply put:

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

Answer 2

It looks like there's an option called reverseStacks (http://api.highcharts.com/highcharts#yAxis.reversedStacks) that defaults to true for stacked charts. You might want to set this to false in your code.

I noticed that your JSFiddle specifically requests Highcharts version 2.3.5, in which this option is presumably not there.

Answer 3

I had a similar problem. After trying different options I ended up setting series index before rendering the chart. Generic 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 anyone is still looking for this. I used reversed: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!
        }