score:43

Accepted answer

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


score:0

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

score:0

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

Related Query

More Query from same tag