An example of an interactive key

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

<script>
    // Create a grouped Bar chart. Note that the data is a 2D array.
    new RGraph.Bar({
        id: 'cvs',
        data: [[8,4,1],[4,8,8],[1,2,2],[3,3,4],[6,5,2],[5,8,8],[4,8,5]],
        options: {
            // Specify the key as you would normally
            key: ['Jim','Jack','Joseph'],
            
            // This makes the key interactive - ie you can click on the key elements
            // and areas on the chart are highlighted. There are other libraries which
            // are also necessary for it to work -
            keyInteractive: true,
            
            // Specify the highlight colors for the interactive key highlight
            keyInteractiveHighlightChartStroke: 'transparent',
            keyInteractiveHighlightChartFill: 'rgba(255,255,255,0.75)',
            
            // This is the size of the key text
            keyTextSize: 14,

            // This can be 'margin' or 'graph' and determines the position of the key
            keyPosition: 'margin',

            backgroundGridVlines: false,
            backgroundGridBorder: false,
            shadow: false,
            textSize:18,
            colorsStroke: 'rgba(0,0,0,0)',
            marginInner: 10,
            marginInnerGrouped: 1,
            marginLeft: 45,
            yaxis: false,
            responsive: [
                {maxWidth: null, width:600,height:250, options: {marginBottom: 85,xaxisLabelsOffsety: 10,xaxisLabelsAngle: 25,xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],textSize:18,marginInner:10},css: {marginBottom: 0,'float': 'right'},parentCss:{textAlign:'none'}},
                {maxWidth: 900,width: 400,height: 150,options: {marginBottom: 25,xaxisLabelsOffsety: 0,xaxisLabelsAngle: 0,xaxisLabels:['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],textSize: 10,marginInner:5},css: {marginBottom: '35px','float': 'none'},parentCss:{textAlign:'center'}}
            ]
        }
    }).wave()
</script>