About
RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 18 years
old) and has a wealth of features making it an ideal
choice to use for showing charts on your website.
Version 7.11
Version 7.11 (released in March 2026) is the
latest version of RGraph and contains just a few
updates to the code which you can see on
the changelog page. There's
a new dumbbell variation for the Bar and Horizontal bar
charts (both SVG and canvas) and the
front page layout of the
website has been tweaked.
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.11, 21st March 2026) 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 2026
January 2026 (v7.10)
- The RGraph.addCss internal function has been updated. This function is used by the Datagrid.
- The Datagrid column sort indicators are now shown on the right-hand-side of the column header text label instead of being right-aligned in that particular column.
-
The Datagrid search now uses better splitting
functionality that allows you to use quotes around
your search terms to enable you to use spaces in them
if you want. for example you can search for any of
these terms if you want to:
- jacob
- jacob barroff (no quotes - searches for both words)
- "jacob barroff" (quoted - so it searches for the one phrase)
- The Datagrid search now has a little magnifying glass icon in the search box that allows you to click to trigger a search as well as pressing the enter key on your keyboard.
- The Datagrid now has a searchFocus property so that you can easily disable the search input from being focused if you need to. If your Datagrid is initially offscreen when the page loads, if the search is focused it can make the page jump.
- On all chart types (both canvas and SVG) that have tooltips, the highlight that you see when you click a bar/segment/line etc now fades in instead of being instantly shown. You can disable the fade and revert to the prior behaviour by setting the highlightFade property to false.
-
Both the internal and external functions have been moved away
from using an object based format for arguments back to a
normal one. This should help speed up the rendering of charts
though you may only notice it if you use animations - which
may be smoother. If you use any member or API
functions then you might need to change the arguments
to the functions to the separate, traditional style instead of
being objects (IMPORTANT: There are exceptions to
this - notably the RGraph.linearGradient and
RGraph.radialGradient functions which continue to use an
object format for their arguments). Here's an example of the
object style of
giving arguments that has been used in RGraph for a number
of years now:
<script> var myArray = RGraph.arrayFill({ array: [], length: this.data.length, value: 1 }); </script>And the updated - more traditional way of passing arguments:
<script> var myArray = RGraph.arrayFill([], this.data.length, 1); </script>Not as readable perhaps - but faster and it results in less code and so smaller downloads for your visitors!
-
All animations have been standardised to be 1 second in
length (though there are a few exceptions to this). So
depending on which animation you use it may be a bit faster
or slower or it may remain the same. You can set exactly
how many frames you want your animation effect to use though
by supplying an
object to the animation function with a "frames" property.
For example (the target is 60 frames per second so this
would take roughly two seconds to complete):
<script> new RGraph.Bar({ id: 'cvs', data: [4,8,6,4,2,4,9], options: { } }).grow({frames: 120}); </script> -
The CSV reader format has changed to this:
<script> new RGraph.CSV('/sample.csv', function (csv) { // ... }); </script>Note that the arguments that you pass to the RGraph.CSV object are no longer an object and are instead separate, normal arguments.
- The Line chart growPoint() method has had its argument list changed.
- The canvas core JS file has had extensive alterations to it because of a big tidy up relating to comments and other whitespace.
-
There's a new clipping callback function which you can do clipping
with instead of calling the start function and then the stop
function. You'll see it in the code looking like this:
<script> RGraph.clipTo.callback(this, function (obj) { // Clipped drawing... }); </script>It clips to the area/shape as specified by the clip: property in the chart configuration though this can be specified with a third argument - see the API documentation for details.
-
The clipping string that you give in the options is now more forgiving
in terms of extraneous spaces. So as well as this:
clip: 'x:-10%-110%'
You could also do this:clip: ' x : -10% - 110% '
- The canvas charts that support background images (eg Bar, HBar, Line, Scatter) now employ clipping for the background image as well as the main chart.
- When using clipping on your (canvas-based) charts the highlight that is used by tooltips is now clipped as well.
-
The internal RGraph.measureText function has had its argument
list changed. It now takes:
- The text to measure.
- Whether the text is italic.
- Whether the text is bold.
- The font used by the text.
- The point size of the text.