Question 276064 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – display all data labels on highchart piechart

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)
    }]
});```
Tags:

2

Answers


  1. 0

    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 !

    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search