Legends display order in piechart highcharts

Question

Can we display legends below the chart based on percentage(%) values in descending order dynamically like shown in below example ? In below example values are hardcoded (chrome, internal explorer etc..) . In real time values will come from database. So i want to know if these values in the legends can be displayed dynamically in an order based on % values ?

https://stackblitz.com/edit/pie-chart-using-highcharts

Thanks.

https://stackblitz.com/edit/pie-chart-using-highcharts

Thanks.

user_8951377 · Answer

You can use afterGetAllItems Highcharts event and sort legend items depending on y value.

Example:

(function(H) {
    H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
        e.allItems = e.allItems.sort((p1, p2) => p2.y - p1.y);
    });
}(Highcharts));

Live demo: http://jsfiddle.net/BlackLabel/9c753pwx/

API Reference: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Legends display order in piechart highcharts

1 Answers