Automatic legend value width for pie chart
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
JavaScript
// add a handler that we will trigger before the chart is created
AmCharts.addInitHandler(function (chart) {
// find out the biggest value
var maxValue = 0;
for(var x in chart.dataProvider) {
var value = chart.dataProvider[x][chart.valueField];
if (value > maxValue)
maxValue = value;
}
// set valueWidth according to the biggest value
if (1000000000 <= maxValue)
chart.legend.valueWidth = 100;
else if (1000000 <= maxValue)
chart.legend.valueWidth = 70;
else if (1000 <= maxValue)
chart.legend.valueWidth = 40;
}, ['pie']);
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "none",
"legend": {
"markerType": "circle",
"position": "right",
"marginRight": 0,
"autoMargins": false,
//valueWidth: 70,
},
"dataProvider": [{
"country": "Czech Republic",
"litres": 2560000.9
}, {
"country": "Ireland",
"litres": 1310000.1
}, {
"country": "Germany",
"litres": 1150000.8
}, {
"country": "Australia",
"litres": 1090000.9
}, {
"country": "Austria",
"litres": 1080000.3
}, {
"country": "UK",
"litres": 650000
}, {
"country": "Belgium",
"litres": 400000
}],
"valueField": "litres",
"titleField": "country",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"exportConfig": {
"menuTop":"0px",
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});