Google charts legend manipulation

javascript jquery google-visualization
fmsf picture fmsf · Oct 18, 2011 · Viewed 54.6k times · Source

Using google area chart: http://code.google.com/apis/chart/interactive/docs/gallery/areachart.html

Does anyone know how I can freelly manipulate the legends?

Pretty much I want one of two:

  • Be able to freelly set each legend element somewhere.
  • Set the legend that is displayed in one line to have multiple lines if the size of the legend exceeds the width of the legend area. (Prefered)

I would avoid hacks to manipulate the svg within the iframe btw.

Answer

MemeDeveloper picture MemeDeveloper · Nov 30, 2012

For full control I'd suggest turning them off 

legend : { position:"none"}

Creating your own totally customised legend outside the chart with html.

Then binding your custom legend up to the chart using the select event, combined with click or hover / focus events (whatever you want) on your custom legend.

see https://code.google.com/apis/ajax/playground/?type=visualization#interaction_using_events for a start.

Related questions

Pie chart with jQuery

I want to create a pie chart in JavaScript. On searching I found the Google Charts API. Since we are using jQuery I found that there is jQuery integration for Google Charts available. But my problem is here the actual …

Read More
Google chart redraw/scale on window resize

How do I redraw/rescale a google linechart on window resize?

Read More
How to label Google Column Chart bars

I am using Google Chart API to create chart for values which goes from 1 to millions. Problem The bars which are representing smaller values (ex: less than 50 or so) are invisible on graph and no way I can see what …

Read More