.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: Add points to a Line chart


View example on CodePen

This is a demonstration of a chart that I was originally asked about through a support request. It's an adjustable Line chart where you can add new points by clicking in the left or right margins. The code for it is shown below and as you can see there's not a great deal to it. It creates the chart as you would normally and then adds a standard listener function to the click event.

This function determines: When the canvas is clicked, whether the mouse is positioned in the left or right margins and adds a new point to either the left or right side accordingly. It also adds a label (which is retrieved from the dom text input below the canvas), adds a tickmark, and clears the dom text input.

Example code for the chart

Here are the html tags that are necessary. There's the canvas tag (naturally) and also the text input which is used so that you can enter the new value.

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas><br />
    <span style="font-size: 20pt">New label: </span><input id="label" style="font-size: 20pt; padding: 3px" />

And here's the javascript code that creates the chart and then adds the event listener that allows you to add new points.

    line = new RGraph.Line({
        id: 'cvs',
        data: [13,12,16,15,12,11,21],
        options: {
            xaxisLabels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            textSize: 14,
            adjustable: true,
            tickmarksStyle: 'circle',
            tickmarksSize: 5,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxis: false,
            axesColor: '#666',
            shadow: false,
            colors: ['#00c']

    line.canvas.addEventListener('click', function (e)
        // Get:
        //  o The mouse coordinates
        //  o The value at the point where the canvas has been clicked
        //  o The value that has been entered in the text input
        var xy     = RGraph.getMouseXY(e),
            value  = line.getValue(e),
            label  = document.getElementById('label').value,
            canvas = line.canvas;
        // The chart was clicked in the right margin so add the new point at the
        // end of the line (RHS)
        if (xy[0] > (canvas.width - line.get('marginRight')) ) {
        // The chart was clicked in the left margin so add the new point at the
        // beginning of the line (LHS)
        } else if (xy[0] < line.get('marginLeft')) {
            line.original_data[0].unshift(value );
        // Set the number of X tickmarks to one less than the number of points on
        // the chart
        line.set('tickmarksCount', line.original_data[0].length - 1);
        // Redraw the chart
        // Clear the text input using standard DOM code
        document.getElementById('label').value = '';
    }, false);