display all data labels on highchart piechart

Question

I have a highchart pie chart but it does not display all the data labels. it only displays the dataLabels of the larger slices. i want the chart to display all the data labels even the ones for the smaller slices. is there a way to format the chart to see all the data labels? can anyone please help with this? example code

function generatePieData(numPieces) {
    let data = [];
    for (let i = 1; i <= numPieces; i++) {
        let piece = {
            y: i
        };
        data.push(piece);
    }
    return data;
}

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: ''
    },
    series: [{
         dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            },
        borderWidth: 0,
        borderRadius: 0,
        data: generatePieData(100)
    }]
});```

Answer 1

When there is insufficient space, Highcharts will selectively display data labels to ensure the chart remains legible. By default, each data label includes padding, and if it overlaps with another label, it gets concealed. To display all data labels, you must adjust the padding to 0.

So in your code add padding: 0 in dataLabels like this:

Highcharts.chart('container', {
chart: {
    type: 'pie'
},
title: {
    text: ''
},
series: [{
     dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            padding: 0
        },
    borderWidth: 0,
    borderRadius: 0,
    data: generatePieData(100)
}]
})

hope this helps !

Answer 2

I recommend reading the related GitHub thread: https://github.com/highcharts/highcharts/issues/7907

You might explore one of the solutions provided in the thread. Additionally, you can experiment with various options such as dataLabels.distance, pie.center, pie.size, and the font size of dataLabels.

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    height: 900,
    width: 900,
  },
  title: {
    text: ''
  },
  series: [{
    dataLabels: {
      enabled: true,
      distance: 130,
      formatter() {
        const fontSize =
          this.percentage < 0.4 ? 5 :
          this.percentage < 0.7 ? 6 :
          this.percentage < 1 ? 7 : 8;
        return `<span style="font-size: ${fontSize}px"><b>${this.key}</b>: ${this.percentage.toFixed(2)} %</span>`;
      },
      connectorPadding: 0,
      padding: 0
    },
    center: ["50%", "30%"],
    size: '30%',
    borderWidth: 0,
    borderRadius: 0,
    data: generatePieData(100)
  }]
})

Demo: https://jsfiddle.net/BlackLabel/9arpx4bt/