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?

score 43 · Answer 1 · answered Mar 25 '15 at 09:48

43

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/

answered Mar 25 '15 at 09:48

lionel

875
8
15

3

API docs: http://api.highcharts.com/highcharts/yAxis.reversedStacks I'd expect false to be the default.. – marcovtwout Dec 22 '16 at 11:26

score 30 · Accepted Answer · answered Apr 24 '13 at 13:41

30

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

answered Apr 24 '13 at 13:41

Sebastian Bochan

37,348
3
49
75

8

I'll try it and add `legend: { reversed: true }` to get it in the right order too. Thanks ! – keskispas Apr 25 '13 at 08:13
Sebastian, would you know how to set a series index value in c#? – cgalvao1993 Dec 06 '13 at 20:00
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> – Sebastian Bochan Dec 09 '13 at 09:12
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). – hon2a Apr 08 '16 at 10:08
This wouldn't work when using chart.addSeries(). zIndex solves this problem. – Hao Chang May 10 '18 at 04:32
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]` ‍♂️ – CTS_AE Jan 10 '20 at 04:40

score 1 · Answer 3 · answered Aug 21 '14 at 16:26

1

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

answered Aug 21 '14 at 16:26

mt81

3,288
1
26
35

Thanks for posting this additional detail - legendIndex is actually what I was after (not index as thats set by the order). – Kong Dec 16 '14 at 23:36
hm according to the docs legendIndex is only for pie charts and the example given by the OP is a line chart – Charlie Martin Jan 29 '15 at 21:31
Welp. Nevermind. Just tried it and it works for all chart types. Docs need updating I guess – Charlie Martin Jan 29 '15 at 21:38

score 0 · Answer 4 · answered Sep 14 '16 at 16:06

0

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

answered Sep 14 '16 at 16:06

Feng Jiang

1,776
19
25

score -2 · Answer 5 · answered Jul 20 '15 at 18:08

-2

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.

answered Jul 20 '15 at 18:08

Matt Sich

3,905
1
22
26

`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. – hon2a Apr 08 '16 at 09:27
This answer is essentially the same as Lionel's (except that one has the correct value for the property) from several months earlier. – TylerH Feb 15 '19 at 19:10

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

5 Answers5