RGraph: HTML5 Javascript charts library - Examples of keys in charts

As of 4th December 2010 the code that produces the keys has been rewritten. There are two variants of keys available, a horizontal one designed to sit in the gutter, and a vertical one that is designed to sit on top of (ie over) the chart.

The actual positioning is now configurable though, so you could have a horizontal key and position it to sit on top of the chart.

Key properties

The available key properties and their defaults are listed below (some chart types have slightly different defaults to suit):

• chart.key ([] (An empty array))
• chart.key.position (graph)
• chart.key.position.gutter.boxed (true)
• chart.key.position.x (null)
• chart.key.position.y (null)
• chart.key.shadow (false)
• chart.key.shadow.offsetx (2)
• chart.key.shadow.offsety (2)
• chart.key.shadow.color (#666)
• chart.key.shadow.blur (3)
• chart.key.color.shape (square)
• chart.key.background (white)
• chart.key.rounded (true)
• chart.key.text.size (10)

Interactive keys

The Line chart supports interactive keys - as shown in the example. This is only available when the key is in graph mode. This allows you to click a key item and it will be highlighted on the chart.