How to prevent my stacked series from being in reverse order?

Question

I tried an example of stacked series on JSFiddle but according to me, series are reversed when stacked:

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        }]
    });
});

The first line in blue should be drawn first (January : 29.9), and the second should be added to this one (January : 29.9 + 144 = 173.9 ).

Is there a way to get series in the right order when they are stacked?

Parthenos

Answer 1

You can change order by index parameter which can be set in serie.

http://jsfiddle.net/KLttA/

series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        index:1
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
        index:0
    }]

Sade

I'll try it and add legend: { reversed: true } to get it in the right order too. Thanks ! – Parthenos

Sebastian, would you know how to set a series index value in c#? – Osei

Honestly im not familair with c#, but it is a object in javascript, so you need to familari with returning JSON in c# and then use in JS> – Sade

While @lionel's answer is better for just getting the stacks in the correct order, this is still very useful in other cases (like fixing the order of non-stacked multiple series in bar charts). – Calcariferous

This wouldn't work when using chart.addSeries(). zIndex solves this problem. – Smolt

If you're using stacks this may get additionally confusing because you'll have sub-ordering within your stacks. I think the legend will then be in the right order for stacks, but then the stacks will not be in reverse order. I haven't yet found a way around this besides living with letting the second stack's legend sit in front of the first stack's legend. They will draw like: {stack1: [a,b,c], stack2: [d]} but the legend will be like: [d, a, b, c]. The actual storage will be like: [a=2, b=1, c=0, d=3] if you want to keep d drawing after stack [a,b,c] 🤦‍♂️ – Winter

Answer 2

Since this was the top result in google, maybe this saves time for some:

The yAxis has a reversedStacks parameter (since version 3.0.10), which is true by default. To build stacks from bottom up, set this to false. Legend and shared tooltip item order remain correct this way.

http://jsfiddle.net/r5upptLo/

Girgenti

API docs: api.highcharts.com/highcharts/yAxis.reversedStacks I'd expect false to be the default.. – Daugavpils

Answer 3

You can use the serie's legendIndex parameter : http://api.highcharts.com/highcharts#series.data.legendIndex

Marymarya

Thanks for posting this additional detail - legendIndex is actually what I was after (not index as thats set by the order). – Deflagrate

hm according to the docs legendIndex is only for pie charts and the example given by the OP is a line chart – Teleost

Welp. Nevermind. Just tried it and it works for all chart types. Docs need updating I guess – Teleost

Answer 4

Another way of doing this is by adding .reverse() to the end of the series array, see example at http://jsfiddle.net/sq9u6q5n/ .

Gardia

Answer 5

What you are looking for is reversed in xAxis or yAxis. I tried reversedStacks but it didn't work and after looking at the documentation, I couldn't find it so assuming that it has been replaced with reversed.

Melioration

reversed does something completely different. It reverses the whole axis, e.g. if it previously went from 0 on the left to 100 on the right, 0 is now on the right and the bars (if it's a bar chart) start from the right. – Calcariferous

This answer is essentially the same as Lionel's (except that one has the correct value for the property) from several months earlier. – Swagsman