About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

Ingraph labels

This page shows the various options for ingraph labels. Ingraph labels allow you to point out certain datapoints on your chart and add labels. The ingraph labels can be set like this:

obj.set({
    labelsIngraph: [,,'Hoolio',,'Olga']
});

If a simple string isn't enough for you then you can give an array of options for each label if you want more control.

obj.set({
    labelsIngraph: [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']
});

The array can consist of:

Example Line chart

This example code produces a simple Line chart with two ingraph labels on it.

<script>
    new RGraph.Line({
        id: 'cvs',
        data: [4,5,6,3,2,5,6,4,2,4,1],
        options: {
            title: 'Line chart with ingraph labels',
            xaxisLabels: ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe'],
            labelsIngraph: [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']
        }
    }).draw();
</script>

Example Bar chart

This example code produces a simple Bar chart with two ingraph labels on it.

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,5,6,3,2,5,6,4,2,4,1],
        options: {
            colors: ['red'],
            title: 'Bar chart with ingraph labels',
            xaxisLabels: ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe'],
            labelsIngraph: [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']
        }
    }).draw();
</script>

Example Scatter chart

This example code produces a simple Scatter chart with three ingraph labels on it.

<script>
    new RGraph.Scatter({
        id: 'cvs',
        data: [
            [[5,15],[24,30],[27,3],[23, 5]], // First dataset
            [[4,12]]                         // Second dataset
        ],
        options: {
            title: 'Scatter chart with ingraph labels',
            xaxisLabels: ['W1','W2','W3','W4'],
            labelsIngraph: [,,['Hoolio', 'red', 'yellow', -1, 60],'Olga','Fred'],
            xaxisScaleMax: 31
        }
    }).draw();
</script>

Example bar chart (dot variant)

This example code produces another Bar chart - this time using the dot variant of the Bar chart.

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,5,6,3,2,5,6,4,2,4,1],
        options: {
            colors: ['black'],
            title: 'Bar chart with ingraph labels (dot variant)',
            xaxisLabels: ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe'],
            variant: 'dot',
            labelsIngraph: [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']
        }
    }).draw();
</script>