Dealing with the issue of chart size when there is a large legend can be challenging. I came across an article that addresses this problem: Putting a legend outside the chart area. However, the downside to this solution is that it restricts placing the legend on the top, left, or even right side of the chart; it remains fixed at the bottom. Any suggestions on how to overcome this limitation?
Here is a sample of what I am aiming to achieve:
JS file `
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"startDuration": 0,
"theme": "light",
"addClassNames": true,
"legend": {
"divId" : "legenddiv",
},
"innerRadius": "30%",
"dataProvider": [...],
"valueField": "litres",
"titleField": "country"
});
var legend = new AmCharts.AmLegend();
legend.position = document.getElementById("mySelect").options;
chart.addLegend(legend, "legenddiv");
`
html file
<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>
<select id="mySelect">
<option>top</option>
<option>left</option>
<option>right</option>
<option>Bottom</option>
</select>
Chart div:
<div id="chartdiv" style="height: 250px; border: 2px dotted #c33; margin: 5px 0 20px 0;"></div>
<br />
Legend div:
<div id="legenddiv" style="border: 2px dotted #3f3; margin: 5px 0 20px 0;"></div>
http://codepen.io/anon/pen/dXbjrJ
Your insights would be greatly appreciated.