Search code examples
jqueryhighchartspie-chart

Data label not showing in some pie chart handles Highchart


I am having a weird a problem in highchart piechart.

If the number of points are more than 6 and if one of them having a less percentage of 1.2% the lesser point won't show data labels.

I am not sure whether it is the exact scenario.

This is my javascript file

    Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    series: [{
        name: 'Brands',
        data: [
        {name: "Nike", y: 91.6},
        {name: "Adidas", y: 2.2},
        {name: "Puma", y: 2.0},
        {name: "Skechers", y: 1.6},
        {name: "North face", y: 1.4},
        {name: "Asics", y: 1.2},
    ],
    }],
});

And This is my jsfiddle

Can any one please help me to solve this?


Solution

  • By setting series.dataLabels.padding : 0 you can show all labels like that:

    series: [{
      name: 'Brands',
      dataLabels: {
        padding: 0
      },
      data: [{
          name: "Nike",
          y: 91.6
        },
        {
          name: "Adidas",
          y: 0.2
        },
        {
          name: "Puma",
          y: 0.2
        },
        {
          name: "Skechers",
          y: 1.6
        },
        {
          name: "North face",
          y: 0.2
        },
        {
          name: "Asics",
          y: 0.2
        },
      ]
    }]
    

    Fiddle