An example of an interactive key
View the bare-bones version of this demo with any interactive features or animations enabled

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.
<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):