About
RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 17 years
old) and has a wealth of features making it an ideal
choice to use for showing charts on your website.
Version 7.01 released
Version 7.01 (released in October 2025) is the
latest version of RGraph and now includes a new tree
structure object. The accompanying Treemenu object can then turn
the object into a fully dynamic tree menu.
You can read the API documentation for the tree on
the main API documentation page
and see an example of the Treemenu
feature by following this link...
New HTML datagrid
In the April 2025 (v6.21) release a new datagrid object
was added.
This makes it easy to add static or dynamic data
tables to your pages. It can be used whether you use the
canvas or SVG libraries or entirely standalone.
Download
Get the latest version of RGraph (version 7.01, 8th October 2025) from
the download page. You can read the changelog here. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
License
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.Release notes for 2022
September 2022 (v6.09)
- This release comes about a month earlier than I'd originally planned because the next change (to the website) is likely to affect a lot of pages. I'll be uploading the pages as and when I make the change on them because I don't want anything to get mixed up (it will just be easier if I do it this way).
- The visual styling of lists on the website has changed. Now, the main contents list for each page has a left-hand-side blue border (as shown above) whilst other lists on the page have been changed to use the standard style of bulleting.
- Now, both the release date and the version number are added to the top of each library file when released. If you ever come across a version of RGraph in use this will help you identify it.
- The canvas Line chart now has a wave effect. There's a demo of this new effect in the download archive called effects-line-wave.html which shows it combined with the trace effect for a pleasing animation. You can also see this on the Line chart documentation page. This animation occurs when you click the button to change dataset. It reverses the wave and trace effects, switches the data, and then animates the lines back in. The reverse option for the trace effect is new to this version.
- The SVG Bar chart demo svg-bar-britains-top-earning-boss.html has been updated so that now, on a smaller screen, the page switches from showing a Bar chart to showing a Horizontal Bar chart instead - which makes better use of the reduced available space.
- The Scatter chart drill-down demo scatter-drilldown.html has been improved - so making drill-down charts is now much easier to do so. You can view this demo and see the source code in the download archive.
- The Line chart backdrop option didn't work well with null values. This has now been remedied and null values are fully supported in regular lines.
July 2022 (v6.08)
- A significant change in this release is a switch from using accessible text by default to using native canvas text. So from now on the website and the demos in the download archive have been set to not use the textAccessible option. The defaults in the libraries have also been set to not use the textAccessible feature. As a result of this, your charts may look slightly different if you upgrade from a prior version and the text will not be selectable with your mouse. You can of course re-enable accessible text by setting the textAccessible option to true in your chart configuration. Note: If you navigate the dom in your responsive callback function(s) you may need to adjust it because of this change.
- The Line chart dataset tooltips feature has been updated. You can see the updated HOWTO guide here and also there's a demo that runs on your computer in the download archive.
- When the x-axis was drawing a scale the minimum label was being drawn multiple times. This has been fixed now.
- The datetime HOWTO page has been updated to include information about using the Day.js library for handling dates and times instead of Moment.js. The Day.js library is a more up-to-date library and also has a significantly smaller footprint (size-wise).
- SVG chart tooltips now work better when removing the highlight that's added. The code for doing it has also been centralised.
- All of the instances of inline CSS styles have been removed so RGraph works better with the Content-Security-Policy HTTP header option style-src
April 2022 (v6.07)
- The canvas Horizontal Bar chart has had some work done on it regarding the y-axis positioning so if you use the Horizontal Bar chart - upgrade cautiously!
- The frame count on the canvas Horizontal Bar chart animations have changed (the grow and the wave effects).
- A long-standing bug with the SVG Gauge where the inner and outer scales have different numbers of labels and they were shown incorrectly has been fixed.
-
There are now two new functions that will help you
when you're creating Line charts (for example) with
different colors on the top and bottom (eg the
line-clipping1.html line-clipping2.html
line-clipping3.html and line-clipping4.html
demos
in the download
archive). These functions are:
- RGraph.clipTo.start
- RGraph.clipTo.end
- Both the canvas and SVG Bipolar charts have two new options: colorsLeft and colorsRight. These options can be used to specify a set of colors for each side.
- The canvas 3D Bipolar chart has had a bug fixed where the top 3D face was not being redrawn correctly.
January 2022 (v6.06)
-
On the website, I've added a small snippet of jquery
code that makes the browser scroll when you click
an anchor link instead of jumping straight there. If
you're interested in doing similar on your own
website then the relevant code is (just add this code
to the bottom of each page - it assumes that you have
jquery included on the page):
<script> // // Make all anchor links scroll to anchors // instead of jumping to them. // function scrollToAnchor(name) { var tag = $("a[name='" + name + "']"); // The " - 60" accounts for the rgraph.net black, fixed // navigation bar at the top of the page. You may not // need this. $("html,body").animate({scrollTop: tag.offset().top - 60},"slow"); } // // Add a click event listener to all <a> elements. This // listener checks the href to see if it's an anchor link and if // it is it scrolls to it. // $("a").click(function() { var href = this.getAttribute("href"); if (href.substr(0,1) === "#") { var target = href.substr(1); scrollToAnchor(target); } }); </script> - There's now a dedicated set of functions and documentation for importing data from the query string. These are: RGraph.GET.number RGraph.GET.string RGraph.GET.array and RGraph.GET.json. You can read more about these functions on the dedicated documentation page. There's a canvas set of functions and there's a corresponding set of SVG functions too. The documentation applies to both sets of functions.
-
The canvas RGraph.register function
can now accept a function as its argument like this:
RGraph.register(function () { alert('My custom function!'); });The result of this is that the function is called every time all of your canvas tags are redrawn. So when you call the RGraph.redraw function (not the RGraph.redrawCanvas(canvas) function). This is similar to adding a draw event to one of your charts. - The canvas RGraph.text api function now supports having the valign option set to alphabetic. This is only usable when the accessible option is set to false.
- The Bar chart has had the labelsAboveFormatter option added. This can be a function that entirely handles the formatting for the labelsAbove labels.
- The Line chart has had the labelsAboveFormatter option added. This can be a function that entirely handles the formatting for the labelsAbove labels.