An example of an interactive key

View the bare-bones, stripped-down version of this demo

The interactive key was updated in June 2013 and added to more chart types. The types of charts that now support the interactive key are:

• Bar
• Funnel
• Horizontal Bar
• Horizontal Progress
• Line
• Pie
• Radar
• Rose
• Radial Scatter
• Scatter
• Vertical Progress

The interactive key uses the RGraph.common.dynamic.js library and the RGraph.common.core.js libraries so you'll need to include these in your page if you want your chart to show a dynamic key. Apart from that the only additional property that you need to specify in your chart configuration is this: keyInteractive: true.

There's not a lot more going on for this chart except for having angled labels (at 25 degrees) and the groups of bars are made clear by using the marginInner and marginInnerGrouped properties. The chart also uses the wave() animation effect.

For smaller screens the text size is reduced, the margins are changed (both the RGraph margins and also the CSS margins of the canvas tag) and the CSS float is removed.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.drawing.rect.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<div>
    <canvas id="cvs" width="600" height="250" style="float: right; margin-bottom: 50px">[No canvas support]</canvas>
</div>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):