Pie Labels Overlap
loretoparisi opened this issue · comments
Loreto Parisi commented
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 commented
Matthew Norris commented
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.