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 use for showing charts on your website.
Download
Get the latest version of RGraph (version 6.18, 1st June 2024) 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 awave
effect. There's a demo of this new effect in the download archive calledeffects-line-wave.html
which shows it combined with thetrace
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 thewave
andtrace
effects, switches the data, and then animates the lines back in. Thereverse
option for thetrace
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 aBar chart
to showing aHorizontal Bar chart
instead - which makes better use of the reduced available space. -
The
Scatter chart
drill-down demoscatter-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 withnull
values. This has now been remedied andnull
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 thetextAccessible
option. The defaults in the libraries have also been set to not use thetextAccessible
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 thetextAccessible
option totrue
in your chart configuration. Note: If you navigate thedom
in yourresponsive
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 theContent-Security-Policy
HTTP header optionstyle-src
April 2022 (v6.07)
-
The
canvas
Horizontal Bar chart
has had some work done on it regarding they-axis
positioning so if you use theHorizontal Bar chart
- upgrade cautiously! -
The frame count on the
canvas
Horizontal Bar chart
animations have changed (thegrow
and thewave
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 theline-clipping1.html
line-clipping2.html
line-clipping3.html
andline-clipping4.html
demos in the download archive). These functions are:RGraph.clipTo.start
RGraph.clipTo.end
Line chart
demos show them in the download archive. There's also a HOWTO document that demonstrates an example of a dual-colorLine chart
. -
Both the
canvas
andsvg
Bipolar charts
have two new options:colorsLeft
andcolorsRight
. These options can be used to specify a set of colors for each side. -
The
canvas
3DBipolar 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 havejquery
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
andRGraph.GET.json
. You can read more about these functions on the dedicated documentation page. There's acanvas
set of functions and there's a corresponding set ofsvg
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 yourcanvas
tags are redrawn. So when you call theRGraph.redraw
function (not theRGraph.redrawCanvas(canvas)
function). This is similar to adding adraw
event to one of your charts. -
The
canvas
RGraph.text
api
function now supports having thevalign
option set toalphabetic
. This is only usable when theaccessible
option is set tofalse
. -
The
Bar chart
has had thelabelsAboveFormatter
option added. This can be a function that entirely handles the formatting for thelabelsAbove
labels. -
The
Line chart
has had thelabelsAboveFormatter
option added. This can be a function that entirely handles the formatting for thelabelsAbove
labels.