Using HTML keys in charts

RGraph can generate HTML (ie DIV/TABLE/SPAN) keys instead of drawing them on the canvas. In some cases these can be easier to interact with and they don't need to be redrawn.

[No canvas support]



The new (December 2013) HTML and JavaScript based key gives you a way to have a key thats generated outside of the canvas and that's a part of the page just like your other HTML. The key is made up of a TABLE tag - which contains the list of key entries.

Because the key is not drawn onto the canvas it's not subject to redraws (see important note though) and you can script interactivity with it quite easily, such as add event handlers.

The list of configuration options is below.

Important note: Because the rendering of the key involves setting the .innerHTML property of the container that means that any canvas tag that's inside will be reset. So, like it is here, you may need to draw the key before you draw the chart.


An example

This is JavaScript and NOT CSS - meaning that strings (eg CSS property names and values) need to be surrounded by single or double quotes.

    var key = RGraph.HTML.Key(
            colors: ['red','#0f0', 'blue','orange'],
                'Fred<br /><span style="font-size:70%">Warning!</span>',
            links: [
                "javascript:'');" +
            tableClass: 'rgraph_key',
            blobCss: {
                'border-radius': '0'
            blobClass: 'rgraph_key_blob',
            labelCss: {
            labelClass: 'rgraph_key_label',
            labelCss_0: {
                color: '#dd0 ! important',
                'font-weight': 'bold'
            labelCss_1: {
                color: 'red ! important',
                'font-weight': 'bold'


Configuration options

Layout style:     

Required options

colorsA list (array) of colors that are used as the key colors.None (required)
labelsA list (array) of the labels that are used on the keyNone (required)

Other options

tableCssA list (array) of CSS properties and values that are applied to the table that holds the key.None
tableClassA string that is used as the CSS class for the table that holds the key.None
blobCssA list (array) of CSS properties and values that are applied to the color blob (eg. you could use the border-radius CSS property to get circular blobs).None
blobClassA string that is used as the CSS class for the color blobsNone
labelCssA list (array) of CSS properties and values that are applied to the <SPAN> tag that the label sits in.None
labelClassA string that is used as the CSS class for the span that holds the label.None
linksAn array of links that the labels link to.None


Adding links to the key

Adding a link to the key so that it can be clicked to get (eg) more information or to trigger something on the chart is easy as the links option is provided. Normally this is a URL that opens in the same window as the current page. You can change this behaviour by using the JavaScript function as the example above shows.


The return value

The return value from the function is a DIV object (like you get back from document.getElementById). You can then manipulate it as you would any other DOM node.


Getting all of the label SPAN tags

You can get hold of the SPAN tags that hold the labels by, again, using the DOM methods:

// The key variable is what the RGraph.HTML.Key() function returns
span_tags = key.getElementsByTagName('SPAN');
name = span_tags[0].innerHTML;
RGraph on social media