Hi,
I was tasked with creating a reusable donut chart js plugin, which I have achieved with highcharts. All is well except for the datalabel placement.
The datalabels for the segments have to be within the segments themselves, rather than external to the chart with line pointers to the segments.
The issue is that I can't work out a magic formula for the "distance" datalabel to ensure it always looks central
Here is a codepen using my plugin:
https://codepen.io/jharri/pen/aaRBNO
When the donut first loads, the segment labels aren't *too* bad, although still not central, however if you then change the height and width of the div so something like 220x650 you can see that in some cases the labels are touching the sides
Has anyone done anything similar to this and have any tips?
thanks
Jane