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 »


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 »


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

The setTransform function is similar to the transform function and does the same thing (scale/skew/translate) but it differs in that multiple calls to the transform function are cumulative - so they mount up (eg a translate by 50px and then a translate by 30px is the same as a translate by 80px). The setTransform function, however, is not cumulative - the scale, skew and translate are set to precisely what you specify. So in the case just mentioned if you used the setTransform function instead of the transform function the resulting translation would be 30px. It can be useful when you aren't sure of what translations have gone before but you want to make sure that a translation (or scale or skew) has been done.

Arguments to the function

Note the order of the arguments.

An example

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

        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [1,8,6,3,5],
            options: {