Overlapping labels in pie chart

[nickasd]

Are there any plans to improve the display of labels in pie charts? Currently I have situations like this:

I'm not sure what is the best way to solve it, perhaps adding a minimal y-offset to each label until each one is visible?

[simonbrunel]

I think there are many ways to layout labels that overlap and ideally all should be supported since it impacts the UI. Can you draft your expectations in this case?

[nickasd]

Thanks for answering! Well, I don't have any particular expectations, but one idea might be: since only two labels can be placed at the exact same y-position, they could be have some x-offset until they no more overlap. Then there could still be slight overlaps on the y-axis, but unless the font is automatically adjusted down to make them fit, I guess one would have to come up with some algorithm to calculate the optimal y-offsets.

[nickasd]

Also it would be nice if long labels wouldn't simply be cut off at the edges of the canvas, but instead they would be pushed inwards until they are entirely visible.

[tchapi]

👍 on this. Similarly when the underlying data is "small" (as in : produces a very small pie slice), the problem is there too :

To date is there any workaround that can be implemented easily using the public API ?

Thanks a lot for this plugin btw

[simonbrunel]

@tchapi sorry for the late answer: no, there is no public API to implement this kind of feature. But I'm currently looking to introduce a new option to prevent overlapping labels. What would be the expected result in your case (screenshot you posted)?

[tchapi]

Hi @simonbrunel and thanks for taking the time to look into this. I think the best behaviour would be to offset one or several labels when they are overlapping, adding a line to the relevant segment.

The offset would be chart-type-dependant, since it should be calculated differently if it's a pie chart (angular offset) vs. a bar chart (linear offset along one of the axis).

Something like this (in red) in my example :

But TBH, any solution that makes the labels readable would be a great plus anyway.

[theomarme]

Hi, i have same problem, still no solution ?

[HariPadBharti]

try referring https://stackoverflow.com/questions/45352194/chart-js-v2-6-add-arrows-to-pie-chart-output-values?answertab=active#tab-top

[AlbertoMontalesi]

Try this

set the position to outside and give it a margin, it won't fix it 100% but it should help make it more readable

	labels: {
				position: 'outside',
				textMargin: 10,
			}

[Herz3h]

I kind of manage to avoid the overlap by using:

datalabels: {
anchor: 'end',
align: 'end',
offset: 10
}

But then the labels are drawn hidden outside the parent div, and are therefore hidden sometimes. Is there any way to adjust the margin of the chart accordingly so everything is visibile ?

[MikeBishop]

The newer options to avoid overlap work, but the "auto" behavior to prioritize the earlier element in the series isn't always ideal. Personally, I'd rather see a policy of prioritizing the larger value, at least for a pie chart. Perhaps more flexible would be the ability to define a function that gets passed collections of labels that overlap and returns the one to show.

[kprkumar]

I need to add data labels outside the pie chart with link to it. Is it possible using chartJs.

[emit077]

try this one
https://stackoverflow.com/a/72731158/10175889
jsfiddle