20

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 Answers 3

48

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


6
  • Is there a way to do this same thing to order the grouped tooltip also? Its out of order in the tooltip.
    – M H
    Aug 10, 2015 at 19:37
  • @Hanoncs: Yes, that is possible. See my updated answer.
    – Jean-Paul
    Aug 10, 2015 at 20:34
  • Is there a way to set the series index dynamically? For example, update series index on load or redraw based on a certain condition?. Please help if you can.
    – arjary
    May 24, 2019 at 21:28
  • 1
    Just found this - setting the legendIndex is very useful! See e.g. coronavisualizer.org/cv_vaccs.php#chart-pct-pop-vaccinated Jun 30, 2021 at 11:10
  • 1
    This helped me too. My setup had a Series and multiple SerieData objects inside. I alterede LegendIndex which is 0-based and could fix up so the Legend came in the natural order towards the series added reading the bar chart from top to bottom Mar 7, 2022 at 15:10
0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.