Using keys in your charts

Share RGraph:   Share or Like RGraph on Facebook!

Summary
Like the canvas libraries, the SVG libraries can show a key (in gutter mode only). This can allow you to add an indication of what each dataset represents.

Like the canvas libraries the SVG libraries have the ability to add a key to your charts to help identify datasets - albeit only in gutter mode (ie by default the key is positioned in the gutter as is demonstrated by the Bar chart here). The source code that generates the Bar chart is shown below. By default the shape is a square but - as is demonstrated here - it can be customised to be a triangle, circle or line.

<script>
    bar = new RGraph.SVG.Bar({
        id: 'cc',
        data: [[4,8,6],[5,3,2],[1,5,8],[7,9,4],[4,2,2],[5,6,3],[4,8,6]],
        options: {
            key: ['Richard','David','Jimmy'],
            keyTextBold: true,
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            colors: ['rgba(255,0,0,0.5)','rgba(0,255,0,0.5)','rgba(0,0,255,0.5)'],
            title: 'A Bar chart with a key',
            gutterTop: 50,
            labelsAbove: true,
            labelsAboveUnitsPost: 'kg',
            labelsAboveSize: 8,
            labelsAboveColor: '#333',
            yaxis: false,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            hmargin: 10
        }
    }).draw();
</script>