Putting a legend outside the chart area

Martynas Majeris -

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/

Have more questions? Submit a request


  • Avatar
    Tom Cummings

    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?

Powered by Zendesk