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 beginPath function

The beginPath function can be used to begin a new path, with nothing in it, to draw on your canvas. It's a good idea to use because if you start using animation you may get trailing, connecting lines, which only become apparent in animations. These lines can be due to paths at the end of the drawing being left open and then connecting to the start of the drawing on the next frame.

The beginPath function in effect "resets" the path - emptying it of all sub-paths. It's a good idea to use this function whenever you start a new "section" of drawing. There is an associated closePath function but this has the (sometimes undesired) side effect of drawing a line from the last point in your path back to the starting point.

An example

    window.onload = function ()
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        // Start a new path