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?
The solution to this kind of mess is putting the legend outside of the chart area altogether into a totally different div, which you can style, position and even control using CSS or JavaScript.
Let's create two separate divs: one for the chart and the other for legend:
Chart div:
<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:
chart.addLegend(legend, "legenddiv");
And voila!
Here's a link to a live example: http://jsfiddle.net/amcharts/Cww3D/
When I used this technique, the legend is no longer included when exporting the chart as an image. Is there a way to have to he legend included when exporting as an image?