Examples of using keys or legends in your charts

Documentation about using keys in your charts. Keys can be used when you have (for example) multiple sets of data that need to be identified. Interactive keys can enhance this further


[No canvas support]
[No canvas support]
[No canvas support]

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 configuration properties

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

Active key elements

When you hover over or click on a key element/entry then the RGraph registry will hold details of the relevant key entry. So in your event listener you will be able to determine the key entry like this:

var key = RGraph.Registry.get('key-element');

And you could use it like this:

// Assume that myLine is your line chart object
$(myLine.canvas).on('mousemove', function (e)
    var key = RGraph.Registry.get('key-element');

    if (key) {
        // alert() the details of the object

Interactive keys

Certain chart types (eg Bar, Line, Pie) can be made to have interactive keys. This can make identifying datasets or items illustrated by the key much simpler. There is an example page detailing interactive keys here.

HTML keys

In December 2013 a function was added to RGraph that allows you to use a HTML based key next to your chart. This key is made up of DIV and SPAN tags so you may find it easier to interact with. You can read more about HTML keys on this page.
RGraph on social media