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.
Download
Get the latest version of RGraph (version 6.20, 1st December 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 2018
October 2018 (v4.68)
-
The
Gauge chart
valueText
option now works satisfactorily when you have multiple values. -
The
Bar chart
and theLine chart
have had theerrorbars
support made to be more accommodating. The values of the array that you give theerrorbars
property can now be:undefined
,null
, a number, an object with just themax
property set, an object with just themin
property set or an object with themin
andmax
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 thesvg-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
andtitleY
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 ajson
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 thecanvas
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. Thesvg
Waterfall chart
already supports this option. -
Added the
textItalic
andtextBold
to theRScatter 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 thestrokestyle
(which has also now been documented). The basicRose 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 thelabelsMaxOffsety
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 ofdom
text. Thesvg
key propertykeyTextColor
has been documented. -
Added the
barOffsetx
andbarOffsety
properties to theWaterfall 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
androundrobin
. There are three example pages in the download archive that show the new effects. -
The
css
line-height
property for thecanvas
accessible text option is now set toinitial
so your owncss
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 yourGantt chart
you'll have to convert your data too. -
The
canvas
api
functionRGraph.arrayClone
function has been updated. This function is widely used so please report any problems. -
Formerly, in the
svg
Bar chart
, in thedraw
function when the maximum value was calculated theyaxisMax
andyaxisMin
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 thetrace
effect so that it traces from the center outwards. By combining three distinctLine 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
andsvg
versions of thecsv
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 drawingapi
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 theMeter chart
which enables you to make the dual scaleMeter chart
on the left-hand-side of the meter-dual-scale.html demo page. -
Notable changes to both the
canvas
and thesvg
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.
-
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
- The
Bar chart
Line chart
Scatter chart
andWaterfall chart
can now have rotated X labels by way of thexaxisTextAngle
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 gridpath
object(s) are now set to have thecss
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 thesvg
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 theyaxisMax
andyaxisMin
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 (soPie 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 multipleLine charts
they can be an array of different styles. -
The
svg
Line chart
blob type for the key can now also besquaredot
orrectdot
. -
The
Pie chart
demo that demonstrates usingPie charts
as Meters has been updated slightly so that thePie charts
have a gray background. This means that thePie charts
are more like growing progress bars. -
When there were multiple
svg
Pie charts
on one page using theroundRobin
effect on all of them, it didn't work well. This is now fixed so that multiple instances of theroundRobin
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 totrace
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 thecss
pointer-events
property tonone
. - 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.