Accepted answer

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


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:


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!


It looks like there's an option called reverseStacks ( 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.

Related Query

More Query from same tag