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