Overlapping labels in pie chart about chartjs-plugin-datalabels HOT 13 OPEN

👍 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

from chartjs-plugin-datalabels.

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.

from chartjs-plugin-datalabels.

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.

from chartjs-plugin-datalabels.

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

from chartjs-plugin-datalabels.

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,
			}

from chartjs-plugin-datalabels.

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?

from chartjs-plugin-datalabels.

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.

from chartjs-plugin-datalabels.

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.

from chartjs-plugin-datalabels.

@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)?

from chartjs-plugin-datalabels.

Hi, i have same problem, still no solution ?

from chartjs-plugin-datalabels.

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 ?

from chartjs-plugin-datalabels.

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

from chartjs-plugin-datalabels.

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

from chartjs-plugin-datalabels.