Bug #6461
closed
Labels on donut chart overlap for adjacent small arcs
Added by Lauren Walker about 10 years ago.
Updated about 10 years ago.
Description
For now I have compromised on this issue by providing a hover interaction where the other labels are semi-transparent/illegible. But this issue should be totally resolved at some point.
So far it's been difficult to find a solution since the arcs can be at any degree on the arc so simply moving them in one direction can cause overlap with the arc itself or the edge of the SVG viewport.
- Status changed from New to Resolved
Now, when labels are added to the donut chart:
- I check to see if the arc length is under a specified threshold (i.e. detect if it is short and labels will be close together) and if so, I rotate the label by 40 degrees and move them around a bit so they don't overlap.
- Because the labels take up two lines - Format ID with it's count underneath - labels that are rotated will have a hidden count until the user hovers over it's arc. This allows multiple adjacent arcs to be tightly packed into a donut chart without making the text tiny or putting all text on one line, which would cause SVG overflow issues.
- After all labels are added, if the donut chart only has one rotated label (e.g. a donut chart with three arcs of 48%, 48%, and 4%), it is "unrotated" because it is easily readable next to its two adjacent large arcs.
Also available in: Atom
PDF