New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pie chart data labels - allowOverlap is not working #8330

Closed
tejaspchordiya opened this Issue May 14, 2018 · 10 comments

Comments

Projects
None yet
6 participants
@tejaspchordiya

tejaspchordiya commented May 14, 2018

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

This comment has been minimized.

Contributor

sebastianbochan commented May 14, 2018

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

Workaround:
Set useHTML parameter as true:

Related topic:
#7975

Internal note
The textOverflow option seems to not working properly:

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

@tejaspchordiya

This comment has been minimized.

tejaspchordiya commented May 16, 2018

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

This comment has been minimized.

Contributor

sebastianbochan commented May 16, 2018

Hi @tejaspchordiya
You can set the center parameter:

Set width parameter for ellipsis:

@tejaspchordiya

This comment has been minimized.

tejaspchordiya commented May 16, 2018

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

This comment has been minimized.

Contributor

sebastianbochan commented May 17, 2018

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

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

@pawanvjadhav

This comment has been minimized.

pawanvjadhav commented May 17, 2018

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

This comment has been minimized.

Contributor

KacperMadej commented May 17, 2018

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

This comment has been minimized.

pawanvjadhav commented May 21, 2018

@pawelfus

This comment has been minimized.

Contributor

pawelfus commented May 29, 2018

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

This comment has been minimized.

Collaborator

TorsteinHonsi commented May 30, 2018

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:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment