JK_Jha JK_Jha - 1 month ago 12x
AngularJS Question

How to display top 3 data label in piechart highchart

I have a requirement where I want my pie chart to display only top 3 data label instead of displaying all and filling the space. Is there any inbuilt highchart api available or a best solution to achieve this?

Here is my jsfiddle:

plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
showInLegend: true

I have searched enough and tried to find the solution before posting this question but didn't find any help.


You can use dataLabels.formatter function for returning only specific dataLabels (for points thats value is big enough).

formatter: function() {
          var val = this.y,
            allData = $.extend(true, [], this.series.processedYData).sort(),
            length = allData.length;
          if (length - 4 >= 0 && val > allData[length - 4])
            return val;

I am sorting my yValues and then I am checking if my dataLabels points y value is bigger or equal to the third y value of my series. If it is bigger or equal, I am returning value, else I am not returning anything.

Here you can find an example how it can work: http://jsfiddle.net/k80ayx1t/1/