.net Powerful JavaScript charts
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 use for showing charts on your website.

More »


Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to hosted libraries.

More »


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

More »

HOWTO: Make your line clickable

Here's an example of a Line chart with a key - but instead of the key itself being interactive you can click on the lines to then highlight them and the relevant key entry.

Previously a fair amount of custom code was used to add the highlight but that code has now been incorporated into the Line chart library so you now just have to add a single configuration property to your code.

There's a demo page included in the download archive that demonstrates this to the full called line-tooltips-dataset.html

The code for the chart is shown below.

<script src="/libraries/RGraph.common.dynamic.js"></script>
<script src="/libraries/RGraph.common.key.js"></script>
<script src="/libraries/RGraph.line.js"></script>
<script src="/libraries/RGraph.common.tooltips.js"></script>
<canvas id="cvs" width="700" height="300">[No canvas support]</canvas>
    new RGraph.Line({
        data: [
        options: {
            // Some custom properties that are used in the
            // tooltips
            values: [58.3,42.5,62.7],
            names: ['Bob','David','Gary'],
            tooltipsDataset: '<span style="font-style: italic">Results for <b>%{property:names[%{dataset}]}</b>:</span><br /><span style="font-size: 30pt">%{property:values[%{dataset}]}%</span>',
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            yaxis: false,
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            marginBottom: 35,
            linewidth: 2,
            shadow: true,
            title: 'A Line chart with dataset tooltips',
            titleBold: true,
            titleSize: 16,
            spline: true,
            tickmarksStyle: 'endcircle',
            tickmarksSize: 5,
            key: ['Bob','David','Gary'],
            keyBackground: 'white'
    }).draw().on('tooltip', function (obj)
        // You can get the dataset index and the coordinates
        // of the key entry by using these properties. This
        // also fetches the appropriate color from the RGraph
        // object properties (using the index).
        // If you're not bothered about highlighting the key
        // then you can omit this entire ontooltip event

        var index  = obj.tooltipsDatasetIndex;
        var coords = obj.coords.key[index];
        var color  = obj.get('colors')[index];

        // Draw a semi-opaque rectangle around the
        // relevant key entry
            'ga 0.25 b r % % % % f % ga 1',
            coords[0], coords[1],
            coords[2], coords[3],