score:3

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

score:1

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/

score:1

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

score: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.


Related Query

More Query from same tag