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 »

 

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 »

 

Download
Get the latest version of RGraph (version 6.16) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

Fixed tooltip positioning

Written by Richard Heyes, RGraph author, on 22nd July 2020

Here's a demo of a nice-looking Bar chart that shows a new option that has been added for version 5.25 - the tooltipsPositionStatic property. The tooltip also has a pointer that is indicating the relevant bar and that's enabled by using the new tooltipsPointer option.

Notice also that the tooltip key color blobs have a white border around them. css for the key color blobs can be stipulated by using the tooltipsFormattedKeyColorsCss.

And finally, there's also a tooltipsPointerCss option - you probably won't need this though.

Adding a CSS border to your canvas tag

Also, on an entirely different note, here's a tip that you may or may not know. If you want a border around your chart then you can do that easily with css. However, if you use tooltips as well then the extra width of the border can throw the calculations of the correct positions out.

Fortunately you easily circumvent this by wrapping your canvas tag in a div tag and applying any border that you want to that instead. For example:

<div style="border: 100px solid gray; display: inline-block">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
</div>