Highcharts - Change legend index order

Question

When creating a chart with stacked columns using highcharts my series are added by default from top to bottom - the first added series is placed on top. I\'d like to alter t

Answer 1

You can use index parameter which allows to control order http://api.highcharts.com/highcharts#series.index

Answer 2

Yes that's most definitely possible.

What you are looking for is the parameter called legendIndex.

This will allow you to specifiy the order of the items in the legend; hence being able to switch the stacked columns and not switch the legend items.

For example, you could do the following:

series: [
        {
            name: 'base',
            data: [10, 20, 30],
            index:1,
            legendIndex:0
        },
        {
            name: 'sec',
            data: [30, 20, 10],
            index:0,
            legendIndex:1
        }
    ]

DEMO

---

Update: sorting shared tooltip

In reaction to Hanoncs comment, it is possible to sort the order in a shared tooltip as in the legend by using a little hack. This hack goes as follows:

1. Use the property

   yAxis: {
       reversedStacks: false 
   },
   

2. Reverse the index property of the added series. In the example above, series 'base' then has index:0 and 'sec' is given index:1. The items in the shared tooltip will be sorted reversely.

DEMO 2

---

Answer 3

Not sure it its correct way. But using CSS also you can change the order of your legends.

In my case i have angular component legends & following HTML in it which will generate dynamically.

---

<div class="legend">
    <div>legend 1</div>
    <div>legend 2</div>
    <div>legend 3</div>
</div>

After applying some CSS it will reverse the order of legends.

:host ::ng-deep .saving-chat .legend {
    display:flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: flex-end;
}