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 2018
October 2018 (v4.68)
- The Gauge chart valueText option now works satisfactorily when you have multiple values.
- The Bar chart and the Line chart have had the errorbars support made to be more accommodating. The values of the array that you give the errorbars property can now be: undefined, null, a number, an object with just the max property set, an object with just the min property set or an object with the min and max properties set.
- The canvas Pie chart sticks are now curvy. You can see an example of how they look with the pie-pink.html example in the download archive The new curvier sticks are the new default appearance - there's no option to revert to the older style.
- The SVG Pie chart sticks are now curvy. You can see an example with the svg-pie-sheets.html example in the download archive The new curvier sticks are the new default appearance - there's no option to revert to the older style.
- For the majority of charts, the titleX and titleY options can now also be a string like this: titleX: '-5' which allows you to adjust the position that has been calculated instead of giving the exact position.
- The canvas gradient shorthand has been extended with a json syntax that allows you to have far more control over the resulting color. You can read about the new gradient syntax here And you can see an example of the new syntax in the download archive bar-updated-gradient-syntax.html demo.
- Added various labelsAbove options to the canvas Waterfall chart. There are roughly 26 options in total so they can be configured quite extensively. These labels sit above (or below for negative numbers) the bars and allow you to better illustrate the numbers that are involved in the chart. The SVG Waterfall chart already supports this option.
- Added the textItalic and textBold to the RScatter chart.
- Added the following properties to the Thermometer chart to better allow for control over the text: valueLabelFont, valueLabelSize, valueLabelItalic, valueLabelBold, valueLabelColor, textFont, textSize, textItalic, textBold, textColor
- The Rose chart has had a few defaults changed - disabling axes, adding a margin and disabling the strokestyle (which has also now been documented). The basic Rose chart example in the archive shows you the default appearance now.
- The RScatter axes are no longer enabled by default. You can see an example of the RScatter without axes by looking at the basic example in the download archive.
- The canvas Semi-circular Progress bar labelsMinOffsety and the labelsMaxOffsety options now both default to 5 instead of 0.
- The default for the Scatter chart lineColors option has been extended to eight colors by default. If you have more datasets than this you'll need to specify more colors.
- Because of positioning issues, the key text has been changed to always be native canvas text instead of dom text. The SVG key property keyTextColor has been documented.
- Added the barOffsetx and barOffsety properties to the Waterfall chart. This allows you to create a dual dataset Waterfall char (there's an example of that in the download archive).
-
The canvas Meter chart labelsSpecific
option is now easier to use as it can be a regular array of numbers
or strings. In this case, the labels are spread equally across the
Meter. For example:
labelsSpecific: ['Low','Refill', 'OK']
You can mix the two styles if you want to:labelsSpecific: ['Low','Refill', ['OK', 175] ]
- The SVG Rose chart has been updated with two new effects: grow and roundrobin. There are three example pages in the download archive that show the new effects.
- The CSS line-height property for the canvas accessible text option is now set to initial so your own CSS rules shouldn't affect your charts.
-
The Gantt chart has been changed from using numeric indexes to
textual ones. This means that when you specify data it now looks
like this:
data: [ {start: 31, duration: 28, complete: 67, label: 'Richard', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 0, duration: 28, complete: 50, label: 'Rachel', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 12, duration: 28, complete: 45, label: 'Fred', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 59, duration: 14, complete: 0, label: 'Barney', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 59, duration: 21, complete: 5, label: 'Gloria', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 46, duration: 31, complete: 92, label: 'Paul', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 80, duration: 21, complete: 46, label: 'Harry', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 94, duration: 17, complete: 84, label: 'Shane', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 34, duration: 14, complete: 32, label: 'Kyle', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 64, duration: 14, complete: 28, label: 'Cynthia', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 13, duration: 61, complete: 74, label: 'Mabel', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 34, duration: 31, complete: 16, label: 'Paul', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 80, duration: 22, complete: 45, label: 'Kiffen', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'}, {start: 0, duration: 115, complete: 50, label: 'John', linewidth: 0, color: 'red', background: 'pink', border: 'transparent'} ]All of the download examples have been converted to the new format. If you upgrade your Gantt chart you'll have to convert your data too. - The canvas api function RGraph.arrayClone function has been updated. This function is widely used so please report any problems.
- Formerly, in the SVG Bar chart, in the draw function when the maximum value was calculated the yaxisMax and yaxisMin values were set so that the scale didn't change between draws. This is no longer the case so now the scale will reflect the data - whether it has changed or not.
- The canvas Line chart trace effect has a new option: animationTraceCenter This new option changes the trace effect so that it traces from the center outwards. By combining three distinct Line chart objects and correctly managing the colors and data you can have them trace out sequentially.
- The canvas Meter chart has had various new valueText* properties that better allow you to control the appearance of how the value displayed at the center of the chart is rendered,
- Both the canvas and SVG versions of the csv reader have been updated to work standalone - without the RGraph common core file. This means that you can use it for your own doings if you want to.
- Added the backgroundBarcount to the Bar, Line, Scatter, Waterfall, Gantt, Horizontal Bar and the drawing api background object. Use this to control the number of background bars that are shown.
- Corrected a bug in the csv reader that presented itself when you have differing column counts - the column count was not being determined on a per-row basis.
- Corrected a bug in the key that was moving accessible text upwards in both the gutter and graph-based keys.
August 2018 (v4.67)
- I've added more detail about using PhantomJS to get a command-line rendering of a chart to the download page. Don't forget that there's also an SVG HOWTO guide about using PhantomJS that you can look though
- With the Bipolar you can now specify just two colors - one for the left side and one for the right. You don't have to specify colorsSequential to do this - just give exactly two colors.
- Made several bug fixes to the Bipolar chart around coordinates handling.
- Added the SVG Gauge chart. It can show an inner and outer Scale, an ingraph label, be adjustable and you can just have a single scale as well if you wish.
- Added the labelsRadiusOffset property to the Meter chart which enables you to make the dual scale Meter chart on the left-hand-side of the meter-dual-scale.html demo page.
-
Notable changes to both the canvas and the SVG Google Sheets
import utility:
- Previously when fetching a row or column both sides of the resulting array were trimmed. Now though only the right-hand-side of the array is trimmed so null values at the start, that are followed by at least one value, will be returned.
- The Google Sheets code can now be used stand-alone - ie you no longer need to include the RGraph(.svg).common.core.js file in your page. This means that you can use the code separately from RGraph if you want.
- The Bar chart Line chart Scatter chart and Waterfall chart can now have rotated X labels by way of the xaxisTextAngle property. Currently, multi-line labels can't be rotated though. Possible values are 0-90.
- Fixed a bug in the Line chart library which was truncating lines.
- Documented the canvas Line chart ticksize property (which has been omitted for some time).
- Various changes to the website that are aimed at improving its Google performance.
- The SVG background grid path object(s) are now set to have the CSS pointer-events property to none. This will help when you want tooltips on multiple objects when you're showing a combined chart. This has also been changed for the SVG Rose chart.
February 2018 (v4.66)
- Fixed a slight bug with the Horizontal Bar background grid which presented itself when there were no labels.
- The Line chart no longer sets the yaxisMax and yaxisMin properties when they've been worked out.
- The SVG Pie chart sticks have changed - they're now made up of just two lines - one that sticks straight out of the segment and another that goes directly to the label (so Pie chart sticks are made up of two lines now - not three.
- The Line chart tickmarks weren't working as described in the documentation. The tickmark properties can now be either a single value (eg a number or a string) or for multiple Line charts they can be an array of different styles.
- The SVG Line chart blob type for the key can now also be squaredot or rectdot.
- The Pie chart demo that demonstrates using Pie charts as Meters has been updated slightly so that the Pie charts have a gray background. This means that the Pie charts are more like growing progress bars.
- When there were multiple SVG Pie charts on one page using the roundRobin effect on all of them, it didn't work well. This is now fixed so that multiple instances of the roundRobin effect will happily coexist with each other.
- When tracing, the Line chart now removes any pre-existing clip-path that a previous trace may have added. This means that multiple calls to trace are possible.
- The default font has been changed from Segoe UI to Arial for all of the SVG libraries.
- The default for the canvas tooltip highlights is to now set the CSS pointer-events property to none.
- This page (regarding the DOMContentLoaded event) has been updated.
- The SVG text routine has been updated so that you no longer have to prepend a non-breaking whitespace character if you want to begin your strings with a newline character.