Version 5.22 of RGraph is now available
Written by Richard Heyes, RGraph author, on 3rd March 2020Only 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.