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 cdnjs.com 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 »

The canvas element

The canvas element is the html tag where all the fun begins! You simply add this tag to your page and then you can get a reference to it, get the 2D context and then start using the api to draw on the canvas. You can add the tag to your page like this:

<!-- These are the  default width and height settings -->
<canvas id="cvs" width="300" height="150">[No canvas support]</canvas>

And then you can get a reference to it like this:

    window.onload = function ()
        // Get a reference to the HTML tag as with any other HTML element
        var canvas  = document.getElementById('cvs');
        // Get a reference to the canvas tag 2D drawing context. This is where all the drawing commands and
        // settings are
        var context = canvas.getContext('2d');

The getContext function returns you the 2D context - this is the object on which all the functions and properties are located. There is a WebGL context for 3D drawing - but that's beyond the scope of this reference (and also significantly more complicated to use!).

Setting the canvas width and height

To set the canvas width and height you must use the html width and height attributes. You can use css if you wish but if you do then the canvas will be scaled up from the html dimensions to fit the css dimensions - so your canvas will look blocky and blurry.