search

benkeen / d3pie

A configurable pie chart lib and generator built on d3.js
MIT License
371 stars 203 forks source link

Added new label rendering mode "aside" to render labels in two vertical stacks instead of around the circle. #161

Open mnori opened 6 years ago

mnori commented 6 years ago

I described an issue in #160 where clusters of small segments at the bottom of the pie cause label lines to overlap:

borked

I couldn't work out how to fix this and keep the circular label positioning, but did end up creating a new alternative label positioning mode called "aside" where the labels are rendered as two vertically aligned lists, this gets rid of the problem:

worky

The new rendering mode can be activated with a config option:

{   
    ...
    "labels": {
        "lines": {
            "enabled": true,
            "color": "#777777",
            "style": "aside" // <- new style option
        }
    }
    ...
}

Demo of the bug and the new "aside" rendering mode can be found here: https://codepen.io/wildtype/pen/ajjrmr