javascript - Google charts legend manipulation

Question

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 1

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.