Chart legend is a great visual tool that makes charts event more usable and easy to comprehend. However, sometimes it's size gets unpredictable. If there are a lot of items in the legend, the actual chart gets shrunk in order to accommodate space for the legend. This may lead to unattractive situations like this:
Ain't pretty, right?
Let's create two separate divs: one for the chart and the other for legend:
<div id="chartdiv" style="height: 250px; border: 2px dotted #c33; margin: 5px 0 20px 0;"></div> Legend div:
<div id="legenddiv" style="border: 2px dotted #3f3; margin: 5px 0 20px 0;"></div>
Now, when we add the legend to the chart using chart.addLegend(), we specify and id of the legend div as a second parameter:
Here's a link to a live example: http://jsfiddle.net/amcharts/Cww3D/