HighCharts Pie chart dataLabels are not fully displayed

26 Views Asked by At

When I use a pie chart to display data, the labels of the data are not fully displayed.Especially when the data-intensive parts can only display a few labels. A label is missing in the upper left corner

My requirement is to be able to display all labels. Even if the data is relatively dense, all labels can be displayed. It is best if the labels do not overlap.

1

There are 1 best solutions below

2
On

Sometimes dataLabels are not displayed because there's not enough place for them to render. To make sure that all of them are rendered we have to do two things:

  1. Set dataLabels.allowOverlap property to true.
  2. Ensure that there's enough place for the dataLabels to render.

In your case just increase the dataLabels.distance property a bit:

 dataLabels: {
  distance: 50
 }

Demo: https://jsfiddle.net/BlackLabel/ptmLw12r/

API references:

https://api.highcharts.com/highcharts/plotOptions.pie.dataLabels.distance

https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.allowOverlap