Highcharts - Change legend index order

17
votes

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 this behaviour so that the last added series was on top. I tried to change index and zIndex options, but then items in legend got reordered as well. Here is a simple example: http://jsfiddle.net/6bCBf/7/. 

$(function () {

    var chart = new Highcharts.Chart({

        chart: {
            type: 'column',
            renderTo: 'container'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar']
        },

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

        series: [
            {
                name: 'base',
                data: [10, 20, 30],
                index:25,
                zIndex:10
            },
            {
                name: 'sec',
                data: [30, 20, 10],
                index:1,
                zIndex:9
            }
        ]
    });   
});

Is it possible to change stack order, but keep legend ordering? I'd just like to have legend ordered alphabetically, but items in chart added from bottom to top.

3
highcharts

3 Answers

40
votes

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

0
votes

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

0
votes

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