Pie Labels Overlap

[Loreto Parisi]

My labels are text with a generic size. In some cases labels overlaps like in the following

My configuration was

var pie = new d3pie(id, {
            "header": {
                /*"title": {
                    "text": "title",
                    "fontSize": 20,
                    "font": "open sans"
                },
                "subtitle": {
                    "text": "desc",
                    "color": "#999999",
                    "fontSize": 11,
                    "font": "open sans"
                },
                "titleSubtitlePadding": 9*/
            },
            "footer": {
                "color": "#999999",
                "fontSize": 10,
                "font": "open sans",
                "location": "bottom-left"
            },
            "size": {
                "canvasWidth": width,
                "canvasHeight": height,
                "pieOuterRadius": "80%"
            },
            "data": {
                "sortOrder": "value-desc",
                "content": data
            },
            "labels": {
                "outer": {
                    "pieDistance": 42
                },
                "inner": {
                    "hideWhenLessThanPercentage": 3
                },
                "mainLabel": {
                    "fontSize": 11
                },
                "percentage": {
                    "color": "#ffffff",
                    "decimalPlaces": 0
                },
                "value": {
                    "color": "#adadad",
                    "fontSize": 11
                },
                "lines": {
                    "enabled": true
                },
                "truncation": {
                    "enabled": true
                }
            },
            "effects": {
                "pullOutSegmentOnClick": {
                    "effect": "linear",
                    "speed": 400,
                    "size": 8
                }
            },
            "misc": {
                "gradient": {
                    "enabled": true,
                    "percentage": 100
                }
            }
        }); 

[Matthew Norris]

Nice library overall. I had a similar problem. It seems to happen when there are lots of segments clustered at the top or bottom of the chart.

I'm probably just going to work around this by drawing a colour coded legend next to the pie chart and ditching the labels.

[Matthew Norris]

I think my problem is different from the OP, as after running tests I found that label segments render correctly at the top of the pie, as long as there are not too many of them.

I opened an issue for my own bug here - #160 - this includes a solution where I added an alternative label rendering mode to stop the lines from overlapping.