jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Calculating datalabel position with variable chart size

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
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Calculating datalabel position with variable chart size

Hi, Jane

I am sorry for answering so late.
In my opinion, your issue is rather a bug. Look at this jsFiddle: http://jsfiddle.net/BlackLabel/pcb47tqh/
The t_1 and t_3 labels are the same value and are on the opposite side of donat, so expected is to set them in the same position relative to the center of donat. However, t_1 is closer to the center than t_2. I am reporting this on our GitHub issue channel and we will take a closer look at this.
https://github.com/highcharts/highcharts/issues/9005

When it comes to the distance, there is no simple formula for calculating it. There was an idea to calculate distance in a different way, but was not really popular and did not get enough number of votes:
https://github.com/highcharts/highcharts/issues/8854
https://highcharts.uservoice.com/forums ... f-pie-size

Kind regards,
Rafał
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”