highchartsreact-highcharts

HighchartsReact changing the legend order


I want to control the legend order so data2 will be displayed first from the left and then data1, without changing the order of my series objects. is there a way to do it?

enter image description here

I want it to look like this: enter image description here

My legend section currently looks like that:

        legend: {
            enabled: true,
            align: 'left'
        },

Solution

  • You can order your series in the legend manually by using legendIndex. For example (API):

        series: [{
            type: 'area',
            name: 'A',
            data: [1, 2, 3, 2, 4],
            marker: false,
            legendIndex: 2
        }, {
            type: 'area',
            data: [2, 3, 2, 5, 4],
            name: 'B',
            marker: false,
            legendIndex: 1
        }]
    

    See this JSFiddle demonstration.