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.Backwards compatibility
2021
2019
2016
Older notes are not available.
June 2024 (v6.18)
- The RGraph.arrayClone function has been updated and reimplemented.
-
The
svg
Scatter chart
has had reference issues with the data resolved. Please contact me via the support forum if you come across any issues. -
The
last
function that was added to theArray
prototype has been removed. An easy way to get the last element of anarray
is to use theat
function like this:myArray.at(-1)
-
The
coordsSpline
variable on theHorizontal Bar chart
object that gets populated with the coordinates of theVertical Spline
has been updated. It's now a dimension less than it was previously. This means that:-
obj.coordsSpline
is the variable that holds all the coordinates of all the splines (though only one is permitted). -
obj.coordsSpline[0]
is the variable that holds the coordinates of all the points on the first line (again, there's only one permitted). -
obj.coordsSpline[0][0]
is the variable that holds thexy
coordinates of the first point on the line. -
obj.coordsSpline[0][0][0]
is the variable that holds thex
coordinate of the first point on the line. -
obj.coordsSpline[0][0][1]
is the variable that holds they
coordinate of the first point on the line.
-
-
RGraph.tooltips.css
has been removed. Use the (documented)RGraph.tooltips.style
instead. -
In order to skirt a bug with the new
structuredClone
function the default background color for thevprogress
andhprogress
has been changed to#eee
March 2024 (v6.17)
-
The
svg
Funnel chart
background bars are now child elements of thesvgAllGroup
instead of the first background group. -
The
Radar chart
default appearance has been tweaked: Thecolors
have been changed (black
for thestroke
color with a slightred
fill, thelinewidth
has been set to2
,tickmarks
have been enabled
December 2023 (v6.15)
-
The
canvas
Gantt chart
, thecanvas
Horizontal Bar chart
and thesvg
Horizontal Bar chart
documentation have been tweaked and brought into line with the rest of RGraph in that thelabelsInBar
properties are nowlabelsInbar
properties (capitalisation). There's compatibility code there to accommodate this change so there's no need to rush and change all of your code. In fact, from the next version (6.16
) capitalisation in property names won't matter - you'll be able to uselabelsInBar
labelsInbar
LABELSINBAR
labelsinbar
or evenlAbElSiNbAr
(!). And the same applies to all of the property names. I'd probably advise against the last one though - just for readabilities sake! -
The
Gantt chart
propertylabelsInbarBgcolor
is now calledlabelsInbarBackground
There's compatibility code there to accommodate this change so there's no need to change your code. -
The
canvas
Semi-circular Progress bar
backgroundBackdrop
andbackgroundBackdropColor
properties have been changed tobackgroundFill
andbackgroundFillColor
. -
The
Meter chart
labelsValueAccessible
property now defaults tofalse
(ie off). -
The
beveled
option has been removed from theHorizontal Progress bar
and theVertical Progress bar
July 2023 (v6.13)
-
The
Bar chart
optionlabelsAbove
was showing numbers incorrectly and not fully respecting thelabelsAboveDecimals
setting. This has now been remedied so if you use this option the figures on your chart may now show decimals where previously they didn't. Now, if you set thelabelsAboveDecimals
option to1
, then that's what you will see regardless of whether the number has decimals (eg100.0
).
February 2023 (v6.11)
-
The
labelsOffsetRadius
property is now calledlabelsRadiusOffset
. You don't need to upgrade immediately as there's some code in there to handle the name change. -
The
canvas
title code has been rewritten for this release so your title may require adjusting slightly. See the documentation for your chart for the exact properties to use.
January 2023 (v6.10)
-
svg
chart types that allow the setting of shadows have had theshadowOpacity
option removed and theshadowColor
property added in its place. This affects the followingsvg
chart types: Bar, Bipolar, HBar, Line, Pie, Radar and Waterfall.
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. -
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.
April 2022 (v6.07)
-
The
canvas
Horizontal Bar chart
has had some work done on it regarding they-axis
positioning so if you use the HorizontalBar chart
- upgrade cautiously! -
The frame count on the
canvas
Horizontal Bar chart
animations have changed (thegrow
and thewave
effects).
November 2021 (v6.05)
-
The minimum and maximum labels on the
Semi-circular Progress bar
no longer fall back to the scale properties. This is because a proper scale has been added. This applies to both thecanvas
andsvg
versions of the meter.
October 2021 (v6.03)
-
Some of the demos were still using the older
property name
labelsPercent
when it should actually belabelsComplete
. If you still use the olderlabelsPercent
option you should be aware of this if you upgrade and change to use the newer property name.
August 2021 (v6.02)
- The purpose of this release is because of Google updating the requirements for Google Sheets integration. You now need to update your code if you connect to Google Sheets to retrieve your data. There are detailed instructions on what you now need to do on the Google Sheets integration page.
April 2021 (v6.00)
-
This is a significant version increase so you would expect a lot of breaking changes or tweaks -
this however is not the case. The purpose of the version increase is because from version 6.01
features from
javascript
es6
will begin to be used (on an "as and when" basis).javascript
ES 6 has been with us now for over five years and the likelihood is that your browser will support it since most auto-update these days. If you prefer though the last 5.xx version (which was 5.28) is available from the download page. -
The
svg
Scatter chart
outofbounds
option default has been changed totrue
.
March 2021 (v5.28)
-
The
Rose chart
propertylabelsOffset
has been renamed tolabelsOffsetRadius
-
The
Radar chart
propertylabelsOffset
has been renamed tolabelsOffsetRadius
-
The
RScatter chart
propertylabelsRadiusOffset
has been changed tolabelsOffsetRadius
-
The
Meter chart
labelsRadiusOffset
property has been renamed tolabelsOffsetRadius
-
The
Meter chart
labelsValueText*
properties have been renamed tolabelsValue*
-
The
Bipolar chart
colors
option has been changed - the colorsred
blue
andyellow
have been added to the start of thecolors
array. If you don't like this then you can set it back to the original colors array which is commented out in the source code. Simply open theBipolar chart
source file (RGraph.bipolar.js
) and uncomment thecolors
option which is commented out. Search for the following text in the file and remove the//
at the start of the line://colors:
January 2021 (v5.27)
-
The
responsive
function has been rewritten for this release to use thewindow.matchMedia
function instead of thewindow.onresize
event. This means that media queries are used in place of theonresize
event. A consequence of this is that the list of screen size conditions is reversed - and should now be listed from largest to smallest like this:.responsive([ {maxWidth: null,width:600,height:250,options:{marginInner: 10,textSize:12}}, {maxWidth: 800,width:400,height:200,options:{marginInner: 5,textSize:10}} ]);
Otherwise, the usage of the function is no different.
August 2020 (v5.25)
-
The tooltips have changed significantly for this release. First of all the default appearance
has changed to white on black - you can change this using the
tooltipsCss
property if you wish. Secondly, the positioning of the tooltips has changed to be static instead of positioned next to the mouse pointer. You can change this with thetooltipsPositionStatic
property. And lastly, there's a small pointer added to tooltips now as well. You can disable this with thetooltipsPointer
property. You can check the changelog page for details.
April 2020 (v5.23)
- A long-standing bug with angled accessible text has been resolved. However, as a result, if you use angled text your text may need adjusting.
-
With the Waterfall
getShape
functions return value, theindex
and thedataset
properties have been swapped. This means that the first bar on theWaterfall chart
now has adataset
value of0
, the second has1
, the third has a value of2
etc. Theindex
value of each bar is0
. -
The
Rose chart
indexes that are returned by thegetShape
function have been updated. This may impact your code if you use it. Thedataset
and theindex
properties have been swapped fornon-equi-angular
charts.
February 2020 (v5.21)
-
When using the drawing
api
x-axis
andy-axis
objects you should be aware that the color properties have changed. They're no longer calledcolors
- they're now calledxaxisColor
andyaxisColor
and they're not arrays but are now a single color. -
The drawing
api
y-axis
propertyyaxisTickmarksAlign
is now calledyaxisPosition
. -
The drawing
api
x-axis
xaxisScaleInvert
andxaxisScaleVisible
properties have been removed. -
If you use the
axes
property to turn off both the X and Y axes you will now need to use both thexaxis
andyaxis
properties. -
The
y-axis
title is now placed on the same side as the axis. -
If you use the
yaxisLabels
property to toggle they-axis
scale you should now use theyaxisScale
property instead. -
The
*axisScaleZerostart
properties for scales have been removed. -
The
Line chart
propertyyaxisScaleInside
has been removed. -
On a Horizontal
Bar chart
if you use the propertyxaxisLabels
to turn the labels off you may now need to use thexaxisScale
property as well.
December 2019 (v5.2)
-
The
Bar chart
axesColor
axesLinewidth
andaxes
properties are currently in a state of flux - ie they're in the middle of being removed and replaced with axis-specific properties. This means that in this release you'll need to add the following to your chart configuration to remove both of the axes:axes: false, xaxis: false, yaxis: false
And to specify thelinewidth
for the axes you'll need to do this:axesLinewidth: 5, xaxisLinewidth: 5, yaxisLinewidth: 5,
And to specify the color you'll need this:axesColor: 'red', xaxisColor: 'red', yaxisColor: 'red',
-
The tag that's used for the
x-axis
labels has changed fromlabels
toxaxis.labels
If you use this you'll need to update your code. -
The
Semi-circular Progress bar
has had the names of the indexes changed that are returned by thegetShape
function. You can see what they now are by examining theSemi-circular Progress bar
api
documentation -
The
Scatter chart
getShape
indexes for boxplots have been updated. So if you use these you may need to update your code. -
The
Pie chart
and theRose chart
shape
object index names have been changed:angle.start
is nowangleStart
,angle.end
is nowangleEnd
,radius.start
is nowradiusStart
andradius.end
is nowradiusEnd
You'll need to adjust your code accordingly if you use these properties. They were changed so that they worked better as object property names. -
The shape objects that are returned by each objects
getShape
function do not now return any numeric indexes - so the only indexes that are returned are textual ones. This will make your code easier to read and understand. For example, theBar chart
now returns:var shape = obj.getShape(e); // If a bar/segment is matched the shape object will contain these indexes: // // shape.object // The RGraph
Other charts will return different indexes and you can see what they are by inspecting the shape object in your browser'sBar chart
object // shape.x // The X coordinate for the rectangle // shape.y // The Y coordinate for the rectangle // shape.width // The width of the rectangle // shape.height // The height of the rectangle // shape.dataset // In a regularBar chart
the dataset is the same as the sequentialIndex // In a grouped or stackedit pertains to the group of values. // shape.index // In a regular Bar chart
the index is always zero whilst in a grouped // or stacked chart it pertains to the Bar in the relevant group // shape.sequentialIndex // This is the sequential index of the bar/segment. // shape.tooltip // The corresponding tooltip for the Bar or segment.javascript
console (ieconsole.log(shape);
). -
The
RGraph.filledCurvyRect
andRGraph.strokedCurvyRect
functions have been renamed toRGraph.roundedRect
. To use this function you need to do thefill
and/orstroke
yourself like this:context.beginPath(); context.strokeStyle = 'red'; context.fillStyle = 'black'; RGraph.roundedRect({ context: context, x: 50, y: 50, width:100, height: 100, radius: 25 }); context.stroke(); context.fill();
-
The
RGraph.linearGradient
function has had its argument list changed. It should now only be called using the object notation like this:RGraph.linearGradient({ object: obj, // The chart object x1: x1, // The start X coordinate x2: x2, // The end X coordinate y1: y1, // The start Y coordinate y2: y2, // The end Y coordinate colors: colors // An array of colors to use in the gradient });
-
The
RGraph.radialGradient
function has had its argument list changed. It should now only be called using the object notation like this:RGraph.radialGradient({ object: obj, // The chart object x1: x1, // The start X coordinate x2: x2, // The end X coordinate y1: y1, // The start Y coordinate y2: y2, // The end Y coordinate r1: r1, // The start radius r2: r2, // The end radius colors: colors // An array of colors to use in the gradient });
October 2019 (v5.11)
-
The
svg
tooltips have had theline-height
css
property default changed toinitial
.
September 2019 (v5.1)
- Please see the changelog for a list of changes that have been made to the libraries concerning the removal of older compatibility code.
-
The
Odometer chart
propertytickmarks
has been changed to be disabled by default. -
The
Odometer chart
propertytickmarksHighlighted
has been changed to be enabled by default. -
The
Odometer chart
border
property has been changed to be enabled by default. You may need to turn this off if you use a background image. -
The
exec*
option that you could add to your configuration, that executed a function there and then, has been removed. Theexec
function has NOT been removed and can still be used. -
The
RGraph.text
function should now be referred to asRGraph.text
It should now also use only one argument like this:RGraph.text({ object: obj, x: 50, y: 50, text: 'Some text' });
Going forward, more and more functions will use this format for arguments (ie using a single object map instead of true multiple arguments.
August 2019 (v5.1)
-
It shouldn't cause any issues for you - but I've added
RGraph.text
as an alias toRGraph.text2
May 2019 (v5.01)
-
The
hmargin
property has been changed across all libraries tomarginInner
. As well as this, thehmarginGrouped
property has been changed tomarginInnerGrouped
. You will need to change your code if you're setting this property otherwise it will revert to the default value. -
The sketch variant of the
Bar chart
has been updated to better respect themarginInner
setting. There are two examples of this type ofBar chart
in the demos in the download archive:- bar-sketch.html
- bar-sketch-wedding.html
-
The
canvas
RGraph.parseDate
function has been updated to support more date/time formats - so if you useScatter chart
date/time charts or if you use this function you should check that your charts are OK. You shouldn't notice any difference though. -
The
Waterfall chart
textAngle
property toxaxisLabelsAngle
. You will need to update your code appropriately. -
The
labelsAbove
option for specifying a separator was spelled incorrectly and is now called this:labelsAboveSeparator
January 2019 (v5.00)
-
This is big update - hence the version bump to 5.00. All of the
chart types - both
svg
andcanvas
- have been affected. Read about it on the RGraph blog. -
The
Pie chart
optionlabelsSticksUsecolors
has been removed. You can still change the colors of the labels but as a whole (all of the labels) and not so that they match the colors on the charts. -
The
labelsCenter
option should now be the literal string that you want to show in the center of thePie chart
. -
The
canvas
Pie chart
labelsSticksList
property now defaults to true. -
The
canvas
Semi-circular Progress bar
labelsMinOffsety
and thelabelsMaxOffsety
options now both default to 5 instead of 0. - The
Pie chart
optionlabelsSticksUsecolors
has been removed.
February 2018 (v4.66)
-
The
svg
Line chart
no longer sets theyaxisScaleMax
or theyaxisScaleMin
properties when they've been worked out.
November 2017 (v4.65)
-
The
Scatter chart
coordinates have been significantly changed - you can read about them on the Scatter chart documentation page. -
All of the
svg
charts have had the properties adjusted that are held in theobj.coords
variable - specifically theobject
variable is now the RGraph object and theelement
variable is thesvg
element that the coordinates represent. Each chart type's documentation page now details the coordinates. -
The
canvas
Bipolar chart
has had a lot of work done to it this month. As well as now supporting grouped and stacked charts (plus 3D variants of both) the coordinates have been overhauled. You can read details of theBipolar chart
coordinates at this link.
August 2017 (v4.63)
-
One of the
canvas
Pie chart
default values was incorrect - thelabelsSticksUsecolors
value was true when the correct default is false. This has now been corrected. -
The format of the
html
key tableid
has changed. They now look like this:rgraph_key_e80a6674-488f-4e39-b022-314b9129d395
and are returned by thehtml
key function.
October 2016 (v4.58)
-
Formerly the
Bubble chart
draw
function returned the underlyingScatter chart
object. This has now changed so that theBubble chart
is returned. -
The color handling that the
Horizontal Bar chart
uses has changed. You may need to update your code accordingly. The colors are now used from the top down.
August 2016 (v4.57)
- My hosting had "a bit of funny turn" in August so please let me know if things don't work as expected.
-
Previously, when you adjusted the
Bar chart
the bar being adjusted was the one under the mouse pointer - regardless of whether it was under the mouse pointer when you pressed the mouse button down. Now though the bar being adjusted remains being the one that you clicked on, regardless of whether you move the mouse left or right. There's an example of adjusting theBar chart
in the download archive (bar-adjustable.html).
July 2016 (v4.56)
-
The
textAccessiblePointerevents
has had its default changed totrue
. You can change it back tofalse
if you prefer it that way. This change makes it far easier to select and copy text if required. -
The
Bar chart
color defaults have been updated so if you don't set the colors yourself they may well change. -
Each
get
method of the libraries has been updated to use a slightly different way of parsing property names. - The handling of decimal scales (eg 0, 0.02, 0.04, 0.06, 0.08, 0.10) has changed and they're no longer represented in exponential format.
-
Scaled charts (including the drawing
api
X/Y axes) no longer have decimals appended to the zero value (eg Bar, Line, Scatter, Horizontal Bar, Waterfall). They also no longer use scientific notation (eg 5e3 ). -
The
Horizontal Bar chart
default colors have been changed to:[ 'red', 'blue', 'green', 'pink', 'yellow', 'cyan', 'navy', 'gray', 'black' ]
(no gradients) - The
Bar chart
shadow default has been changed to false -
The
Bar chart
colors have been changed to:[ 'red', '#0f0', 'blue', 'pink', 'orange', 'cyan', 'black', 'white', 'green', 'magenta' ]
-
The colors of the
Waterfall chart
have been changed from gradients to solid colors (green, red, blue)
June 2016 (v4.55)
- Only the grid is now cached in the background drawing function. This shouldn't affect anything that you see but should cure a few obscure bugs.
- The option
textAccessiblePointerevents
now defaults to false - The
textAccessible
option now defaults to true. You may need to disable this in a few circumstances (eg 3DPie chart
s). - Scaled charts are slowly being converted to have their
scaleZerostart
option to be enabled by default. - The
Pie chart
default colors have been changed to solid (ie not graduated) versions of themselves -
The
Bipolar chart
scaleZerostart
option now defaults to true. -
If you're manipulating the
textAccessible
span
nodes then you need to know that the format for their IDs has changed and had an extra underscore added. An example ID is now:82_25_100_cvs
so the format is nowX_Y_text_id
- the X and Y coordinates of the text, the text that is shown within thespan
and thecanvas
id
. -
The
Bar chart
animation functions now turn off thelabelsAbove
option whilst animating and turn it back on when done. By doing this performance is noticeably improved - particularly when using thetextAccessible
option. - The
RGraph.path
api
function has been updated. It is now faster and more versatile. See the API documentation for more details. - With the
Bar chart
sketch variants, the bars are now drawn before the axes. - The
Line chart
propertyscaleZerostart
now defaults to true. -
The
Scatter chart
propertyscaleZerostart
has been added and defaults to true. Therefore, you might see a zero now if you upgrade. -
Some of the
Bar chart
defaults have changed. Thestrokestyle
option is nowrgba(0,0,0,0)
,scaleZerostart
is nowtrue
and the shadow option is nowfalse
. - The tooltips no longer have a small pointer image underneath them. The positioning of the tooltip remains the same.
-
Some of the
Bar chart
defaults have changed. Thestrokestyle
option is nowrgba(0,0,0,0)
,scaleZerostart
is nowtrue
and theshadow
option is nowfalse
.
April 2016 (v4.54)
-
The
Line chart
lineVisible
property is now an array instead of a boolean to accommodate the ability to show or hide individual lines. But you shouldn't set the property directly - use thehide(index)
,show(index)
functions. There's also avisible(index)
function. -
The
clearto
option now has a default ofrgba(0,0,0,0)
- this means that if you clear thecanvas
to a color (instead of it clearing to transparency) in effects and now it unexpectedly goes to transparent you may need to set theclearto
option on your object to black (or whatever your chosen color is).
October 2015 (v4.50)
-
Important
Microsoft Internet Explorer 7 and 8 are no longer supported.
As such
ExCanvas
has been removed from the archive. So now the minimum version of Internet Explorer that's supported is version 9. -
The
Line chart
trace
effect is being removed - please use thetrace2
effect instead. Thetrace2
effect does not requirejquery
. -
The
Bipolar chart
now has a background grid enabled by default. You can turn it off though with thebackgroundGrid
property - The
Bipolar chart
functionredrawBars
has been removed -
The
Gantt chart
background grid has changed - you can control how many grid lines there are with these properties:backgroundGridHlinesCount
backgroundGridVlinesCount
August 2015 (v4.32)
-
Because the
Bar chart
3D effect is different now you might well need a larger bottom margin. -
The
Radar chart
labels are no longer boxed by default. The order of theRadar chart
internals has changed - labels are now drawn AFTER the chart itself so that the labels appear ON TOP of the chart. The code that draws theRadar chart
axis labels has also been updated so that the labels now have a white semi-opaque background to them. This enhances readability. -
With the new style properties (eg
backgroundGridColor
instead ofbackground.grid.color
) it means that property names are no longer case insensitive. So use them as they're documented - ie don't add your own upper case characters as you wish. The case now matters. -
The
Line chart
labels.above option no longer usesunits.pre
orunits.post
- they use the separatelabels.above.units.pre
andlabels.above.units.post
-
The registry
palette
entry (which is the annotating palettediv
) is now calledchart.palette
(ie it has thechart.
prefix like other registry entries)
June 2015 (v4.30)
-
instead of using dots to separate the various parts of
the configuration names (eg
text.size
andtext.color
) you can now instead use capital letters (egtextSize
andtextColor
). The rest of the configuration name should be lower-case. This does mean that if you use upper case in your configuration names at present you'll need to stop and also change what you have. You can mix 'n' match configuration styles if you wish but I wouldn't recommend it. This is not a change that you need to rush and switch to - it's simply an alternative configuration method