Using keys in your charts

Like the canvas libraries, the SVG libraries can show a key (in margin 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 margin mode (ie by default the key is positioned in the margin as is demonstrated by the Bar chart on this page). The source code that generates the Bar chart is shown below. By default the color shape is a square but - as is demonstrated here - it can be customised to be a triangle, circle or line.

    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',
            marginTop: 50,
            labelsAbove: true,
            labelsAboveUnitsPost: 'kg',
            labelsAboveSize: 8,
            labelsAboveColor: '#333',
            yaxis: false,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            hmargin: 10