About
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 »

 

Download
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 »

 

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

More »

Version 5.22 of RGraph is now available

Written by Richard Heyes, RGraph author, on 3rd March 2020

Only a month after the last new version I've just released a new version of RGraph - version 5.22. This release adds the exciting new feature that is formatted tooltips. "What are these?" I hear you ask! Well, my friend, this new feature is going to save you a lot of time (perhaps) by allowing you to reduce your tooltips array to a simple string containing "macros" which RGraph will replace with the relevant value. So you can have just one string that will accommodate all of your tooltips. They look like this:

new RGraph.Bar({
    id: 'cvs',
    data: [[5,3],[9,1],[6,6],[5,9],[5,5],[4,3],[5,9]],
    options: {
        colors: ['Gradient(#faa:red)','Gradient(#aaf:blue)'],
        xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
        xaxis: false,
        yaxis: false,
        backgroundGridBorder: false,
        backgroundGridVlines: false,
        
        // A custom property that's used in the tooltips
        myNames: ['Dave','Richard'],
        
        // Some CSS that is applied to this charts tooltips
        tooltipsCss: {
            'background-color': '#000',
            color: 'white',
            'box-shadow': 'none',
            fontWeight: 'bold',
            fontSize: '16pt',
            textAlign: 'left'
        },
        
        // The tooltip string containing the template macros
        tooltips: '<span style="font-style: italic; font-size:10pt">Score for %{property:myNames[%{index}]}</span><br />%{property:xaxisLabels[%{dataset}]}: %{value}kg'
    }
}).draw();

As you can see from the above code there are macros that you can use to add the value to the tooltip and you can also reference the configuration properties (custom or otherwise) and use those in your tooltips too. The full documentation for formatted tooltips is here.

Other changes include the addition of trend lines for the Scatter chart , internally the RGraph.path function has been updated - so it now looks like this:

this.path(
    'lw % b r % % % % s black f red',
    linewidth,
    x, y, width, height
);

A canvas version of an existing SVG demo has been added. You can see this demo in the demos/ folder of the download archive. Unlike the svg version, this demo traces each dataset sequentially.

Other changes can be seen on the changelog page and you can download the latest version from the download page.

https://www.rgraph.net/download.html#stable