Version 5.22 of RGraph is now available

Written by Richard, on 3rd March 2020

A new version of RGraph has been released

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