Pie chart data labels - allowOverlap is not working

[tejaspchordiya]

Actual Behaviour

Pie Chart data labels are overlapping even when I set allowOverlap as false.

JSFiddle: https://jsfiddle.net/tejaspchordiya/vdonaL7L/

Expected Behaviour

Data labels should not overlap or at least ellipsis should appear for long data labels.

[sebastianbochan]

Hi @tejaspchordiya,
Thank you for the reporting. It is regression, in the v6.0.7 worked well.

Workaround:
Set useHTML parameter as true:

• https://jsfiddle.net/BlackLabel/ch37jcwp/

Related topic:
#7975

Internal note
The textOverflow option seems to not working properly:

• https://jsfiddle.net/BlackLabel/hn3ssfmb/

Or we should add the information to our docs, that it works only with useHTML flag.

[tejaspchordiya]

Hi @sebastianbochan,
Thanks for your reply.
But the workaround you suggested has 2 issues-

1. Ring is appearing very small and is shifted to extreme right of the plot area. (Ideally, Ring should appear in the center)
2. Long data labels are not getting wrapped (i. e. ellipsis cannot be seen)

[sebastianbochan]

Hi @tejaspchordiya
You can set the center parameter:

• https://jsfiddle.net/BlackLabel/whrdcLay/

Set width parameter for ellipsis:

• https://jsfiddle.net/BlackLabel/jbayjpv8/

[tejaspchordiya]

Hi @sebastianbochan

After playing for some time with examples you shared, here are my few observations:

• Issue of positioning ring seem to have resolved with center attribute.
• But issue of ring size still persist. The ring size is not relative to the plot size, in other words, irrespective of the plot size the ring size remains unchanged (try resizing the output frame in fiddle):
  https://jsfiddle.net/tejaspchordiya/whrdcLay/1/
• The width parameter seem to be not behaving properly, try changing width (to 100) in example that you shared:
  https://jsfiddle.net/BlackLabel/jbayjpv8/
  We are using Ring chart in an environment where data keeps changing dynamically. Hence, asking user to set width attribute each time for data labels does not seem an ideal solution to me. I would expect Highcharts to apply intellegence once textOverflow parameter is set to ellipsis.

[sebastianbochan]

Hi @tejaspchordiya,
You can control size by the option plotOptions.pie.size and set the value in percentage.
Demo:

• https://jsfiddle.net/BlackLabel/jqe2jwxg/

Regarding to the width, indeed it is a little bit buggy.

[pawanvjadhav]

Sebastianbochan,

We really can't put buggy solution at this time in main Product branch. We really need a solution which is full proof and will work on all cases (User inputs). We don't have much time to test all scenarios.

How much time it will take for you to fix this issue in library itself? Or This is not possible?

[KacperMadej]

We do not have an ETA for the fix for now, but we will be working on resolving the issue - it's possible to fix the problem.

Since this is a regression then you could use last working version until a new version with fix will be released, so version 6.0.7. https://jsfiddle.net/BlackLabel/vdonaL7L/1/

[pawanvjadhav]

Okey Currently we are using 6.0.6. Highchart latest released version has few bug fixes which we have reported and we want them. Upgrading it to 6.0.7 is not good solution for us. Fyi, whenever we try to upgrade to higher version of highchart, we found something is breaked which is working properly in earlier version and we have to wait for proper fix for next release. This adds up delays in overall product release. E.g. : #8325

…

-pawan From: Kacper Madej [mailto:notifications@github.com] Sent: 17 May 2018 16:49 To: highcharts/highcharts <highcharts@noreply.github.com> Cc: Pawan Jadhav <Pawan.Jadhav@1eQ.com>; Comment <comment@noreply.github.com> Subject: Re: [highcharts/highcharts] Pie chart data labels - allowOverlap is not working (#8330) We do not have an ETA for the fix for now, but we will be working on resolving the issue - it's possible to fix the problem. Since this is a regression then you could use last working version until a new version with fix will be released, so version 6.0.7. https://jsfiddle.net/BlackLabel/vdonaL7L/1/ — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#8330 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AGq9ydZApIQ6N_s1Q-D0QGjQyfTTzdxjks5tzVyVgaJpZM4T9g5b>.

[pawelfus]

Note:
It looks like a problem with rem for fonts. I don't see any failing case when fontSize is set in pixels: https://jsfiddle.net/vdonaL7L/2/

[TorsteinHonsi]

The regression is a consequence of a change we did to prevent the data labels to be drawn too far away from the pie slice. Two commits affect this issue:

• bcb146c - Labels were moved into better positions: https://jsfiddle.net/vdonaL7L/3/
• d5a13f0 - Trying to improve the word-wrap, we now accidentally caused overlapping: https://jsfiddle.net/vdonaL7L/4/