AmCharts Pie Chart Labels Won't Fit In sized DIV - amcharts

Question

I am using AmCharts to render a 3D pie chart inside a div and the width is set to 500px and the height is set to 246px. I have attached an image of what I am getting and the code to render the pie chart is below. I have tried every setting known to man and even reviewed the other answer here: Labels are cropped in drill-down pie chart (amCharts) however that answer does not work with mine. I have tried everything in that answer and the labels are still cropped within the DIV. I have bordered the DIV so you can see where it is. You can see the labels are on top of themselves and render outside the DIV as well. Any help would be appreciated as to how to create these pie charts to adhere to DIV sizing so they can be properly exported to images. Thanks.
IMAGE SHOWING CHART POOR LABEL RENDERING
var summaryStockHoldingsPieChart = AmCharts.makeChart("reportingSummaryStockHoldingsPieDiv", {
"type": "pie",
"theme": "light",
"colors": ["#FFFF00", "#808000", "#ADFF2F", "#9ACD32", "#BDB76B", "#F0E68C", "#FFDAB9", "#FAFAD2", "#FFEFD5", "#666600"],
//autoMargins: false,
//marginTop: 60,
//marginBottom: 0,
//marginLeft: 0,
//marginRight: 0,
//pullOutRadius: 0,
fontSize: "12pt",
fontFamily: "Tahoma",
"dataProvider": [
{
"desc": "Consum Discr",
"FullBalloonDescription": "Consum Discr",
"value": 10.0
}, {
"desc": "Consum Stpls",
"FullBalloonDescription": "Consum Stpls",
"value": 0.0
}, {
"desc": "Energy",
"FullBalloonDescription": "Energy",
"value": 0.0
}, {
"desc": "Fincls",
"FullBalloonDescription": "Fincls",
"value": 0.0
}, {
"desc": "Hlth Care",
"FullBalloonDescription": "Hlth Care",
"value": 0.0
}, {
"desc": "Industrials",
"FullBalloonDescription": "Industrials",
"value": 0.0
}, {
"desc": "Info Tech",
"FullBalloonDescription": "Info Tech",
"value": 63.0
}, {
"desc": "Materials",
"FullBalloonDescription": "Materials",
"value": 0.0
}, {
"desc": "Telecom Srv",
"FullBalloonDescription": "Telecom Srv",
"value": 27
}, {
"desc": "Other",
"FullBalloonDescription": "Other",
"value": 0.0
}
],
showZeroSlices: true,
percentPrecision: 0,
labelRadius: 5,
"radius": "40%",
"startAngle": 55,
"maxLabelWidth": 100,
"innerRadius": "0%",
"valueField": "value",
"titleField": "desc",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[FullBalloonDescription]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 55,
"export": {
"enabled": true,
"libs": {
"path": "/Scripts/amcharts/plugins/export/libs/"
},
"menu": []
}
});

Answer 1

The issue is that you seemingly have a lot of zero-value labels in the middle of the pie chart. I'm not sure what fuzzy logic would need to be implemented in the chart to accommodate for such large number of labels crammed together to be displayed nicely.
The common sense dictates that such no-value slices, if you insist of displaying labels for no-value slices, is to put them at the very end.
amCharts has a logic to handle large amount of labels that come at the end, by dividing alignment equally to left and right.
Also, the auto-wrapping of labels is thrown off if you use string-based "12pt" in fontSize. The parameter expects an integer in pixels. I.e.: fontSize: 15.
You could also increase maxLabelWidth so the wrapping of labels does not occur unless absolutely necessary. It seems to me that your vertical space is much more scarce than the horizontal.
And finally, to drive this one home, I suggest you shift your whole pie chart lower off the center, to accommodate for a large number of labels piling on top.
To do that use pieY property.
The default is "50%" or dead-on center of your plot area. Set it to larger number to place it lower. I.e. "65%".
Here's how your chart looks like with all of the above applied:
And here's a live example with all of the changes:
var summaryStockHoldingsPieChart = AmCharts.makeChart("reportingSummaryStockHoldingsPieDiv", {
"type": "pie",
"theme": "light",
"colors": ["#FFFF00", "#808000", "#ADFF2F", "#9ACD32", "#BDB76B", "#F0E68C", "#FFDAB9", "#FAFAD2", "#FFEFD5", "#666600"],
//autoMargins: false,
//marginTop: 60,
//marginBottom: 0,
//marginLeft: 0,
//marginRight: 0,
//pullOutRadius: 0,
fontSize: "12pt",
fontFamily: "Tahoma",
"pieY": "65%",
"dataProvider": [{
"desc": "Consum Discr",
"FullBalloonDescription": "Consum Discr",
"value": 10.0
}, {
"desc": "Info Tech",
"FullBalloonDescription": "Info Tech",
"value": 63.0
}, {
"desc": "Telecom Srv",
"FullBalloonDescription": "Telecom Srv",
"value": 27
}, {
"desc": "Consum Stpls",
"FullBalloonDescription": "Consum Stpls",
"value": 0.0
}, {
"desc": "Energy",
"FullBalloonDescription": "Energy",
"value": 0.0
}, {
"desc": "Fincls",
"FullBalloonDescription": "Fincls",
"value": 0.0
}, {
"desc": "Hlth Care",
"FullBalloonDescription": "Hlth Care",
"value": 0.0
}, {
"desc": "Industrials",
"FullBalloonDescription": "Industrials",
"value": 0.0
}, {
"desc": "Materials",
"FullBalloonDescription": "Materials",
"value": 0.0
}, {
"desc": "Other",
"FullBalloonDescription": "Other",
"value": 0.0
}],
showZeroSlices: true,
percentPrecision: 0,
labelRadius: 5,
"radius": "40%",
//"startAngle": 55,
"maxLabelWidth": 150,
"innerRadius": "0%",
"valueField": "value",
"titleField": "desc",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[FullBalloonDescription]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 55,
"export": {
"enabled": true,
"libs": {
"path": "/Scripts/amcharts/plugins/export/libs/"
},
"menu": []
}
});
#reportingSummaryStockHoldingsPieDiv {
width: 500px;
height: 246px;
border: 1px solid #ccc;
margin: auto;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="reportingSummaryStockHoldingsPieDiv"></div>