Find out about changes in the latest release of RGraph

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.20

Version 7.20 (released in June 2026) is the latest version of RGraph and the major change in this version is an update to the default values of properties making for better looking charts without having to set any properties. Read more about this and other changes in the changelog.

Download »

Download

Get the latest version of RGraph (version 7.20, 9th June 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.

Download »

Latest forum posts

These are the latest support forum posts that have been posted or updated.

9th June, Richard
New version of RGraph: version 7.20

3rd June, Patrick
Question about installing RGraph

1st June, Ouja
How do I add a click event to a bar in my Bar chart?

8th May, Anthony Kuma
Does the SVG Line chart have outofbounds functionality?

Support forum »

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.

Current release: June 2026 (7.20)
Backwards compatibility notes
Past release notes

Current release: June 2026 (7.20)

The canvas Scatter chart defaultColor property can now be an array as well as a string for when you're using multiple datasets. The demo page (which is in the download archive) scatter-date-time-values.html shows how you can set the colorsDefault property and also the lineColors property to red and green.
Added shadow controls for the 3D shadow on the canvas Rose chart. These should be used instead of the regular shadow controls when you're showing a 3D Rose chart. The properties are: variantThreedShadow, variantThreedShadowColor, variantThreedShadowOffsetx, variantThreedShadowOffsety and variantThreedShadowBlur.
A bug has been fixed in the SVG Line chart where trendlines disappeared if you turned the background grid off.
There's now an RGraph.SVG.roundedRect function which you may find easier to use than the existing RGraph.SVG.roundRect function. The signature of the function is as follows:
```
var path = RGraph.SVG.roundedRect = function (
    svg,                                                        // The SVG tag object
    x, y, width, height,                                        // Basic dimensions
    attr = {},                                                  // Attributes to apply to the tag
    style = {},                                                 // Styles to apply to the tag
    topleft = 3,  topright = 3, bottomleft = 3, bottomright = 3 // Magnitudes of the corner rounding
);
```
The svg, x, y, width and height arguments are obvious. The attr argument is any extra attributes that you want to apply to the resulting <path> object and the style argument is any styles that you want to apply. The topleft, topright, bottomleft and bottomright arguments are numbers which control the magnitude of the rounding effect for that corner. The maximum for these is half of the smallest of the width or height. The function adds the <path> object to the SVG tag and returns it too so you can further manipulate if required.
Two new properties have been added to the canvas Pie chart: labelsListSticksAngled (default: false) and labelsListSticksOffset (default: 30). These allow you to change the sticks from being curvy to angular. You can see a demontration of this on the pie-border.html demo page in the download archive.
A new style property has been added to all chart types (canvas, SVG and also the drawing API objects). This new property allows you to add the style configuration that pertains to the chart (for example, tooltip styles) into the main configuration. More general style is permitted too, so, as you can see below, you can apply styles to other tags too (behind the scenes a <style> element is added to the end of the <head> element). For example:
```
new RGraph.HBar({
    id: 'cvs',
    data: [12,18,10,9,6,2,18],
    options: {
        style: [
            'canvas {border: 5px solid red; background-color: white;border-radius: 15px; padding: 20px;}',
            'body {background-color: #ccc;}'
        ]
    }
}).draw();
```
Rounded corners have been added to the canvas Bipolar chart. This involves two new properties: corners (default: round) and cornersRoundRadius (default: 3).
A bug in the canvas Waterfall chart that prevented the X-axis from being correctly rendered has been resolved.
The Horizontal Bar default position for the X-axis has been changed to the top instead of it being at the bottom. If this causes you problems then you may need to adjust your margin sizes or set the X-axis back to the bottom with: xaxisPosition: bottom.

The default values for the various properties have been updated and now more accurately reflect the correct values that are set by the libraries. As a result, your charts may change in appearance slightly - especially with some of the defaults having been changed (as detailed below). The default appearance of the charts do look better and more modern as a result though and you can always go back to the way your chart looked previously (for example, by enabling the background grid vertical lines, the background grid border and the X and Y axes, by resetting the colors or by turning off rounded corners where they're enabled). Here's a list of some of the main updates along with the updated values:

Canvas
Bar	backgroundGridColor (#eee), backgroundGridVlines (false), backgroundGridBorder (false), xaxis (false), yaxis (false), colors (see below), corners(round), cornersRoundRadius (5), colorsStroke (transparent)
Bipolar	backgroundGridColor (#eee), colors (see below), xaxis (false), yaxis (false), colorsStroke (transparent)
Funnel	colorsStroke (transparent), colors (see below), clearto (transparent)
Gantt	backgroundGridColor (#eee), colors (see below), backgroundGridVlines (false), backgroundGridBorder (false), highlightStroke (transparent), corners (round), cornersRoundRadius (10)
Gauge	colors (see below), centerpinColor (black), centerpinGradient (false), shadow (false)
Horizontal bar	colors (see below), backgroundBarsColor1 (transparent), backgroundBarsColor2 (transparent), backgroundGridColor (#eee), backgroundGridHlines (false), backgroundGridBorder (false), colorsStroke (transparent), xaxis (false), yaxis (false), xaxisPosition (top), highlightStroke (transparent), corners (round), cornersRoundRadius (5), colorsStroke (transparent)
Horizontal progress	colors (see below), colorsStrokeInner (transparent), colorsStrokeOuter (transparent), backgroundColor (#efefef), highlightStroke (transparent), borderInner (false), corners (round), cornersRoundRadius (5), clearto (transparent)
Line	colors (see below), backgroundGridColor (#eee), backgroundGridVlines (false), backgroundGridBorder (false), xaxis (false), yaxis (false), linewidth (3), shadow (false)
Meter	colors (see below), colorsGreenColor (#0c0), colorsYellowColor (yellow), colorsRedColor (red)
Modaldialog	CSS box-shadow disabled, CSS border width reduced (1px)
Odometer	colors (see below), backgroundColor (#fff), needleTail (false), border (false), clearto (transparent)
Pie	colors (see below), colorsStroke (transparent), shadow (false), exploded (5), clearto (transparent)
Radar	colors (see below), colorsAlpha (0.5), backgroundGridColor (#aaa), highlightStroke (transparent), tickmarks (false), fillHighlightStroke (transparent), clearto (transparent)
Rose	colors (see below), backgroundGridRadialsCount (0), colorsStroke (transparent), clearto (transparent)
Radial scatter	colors (see below), backgroundGridRadials (false), tickmarks (circle), tickmarksSize (5), segmentHighlightStroke (transparent), clearto (transparent)
Scatter	colors (see below), backgroundBarsColor1 (transparent), backgroundBarsColor2 (transparent), backgroundGridColor (#eee), backgroundGridVlines (false), backgroundGridBorder (false), colorsBubbleGraduated (false), xaxis (false), yaxis (false), tickmarksStyle (circle), tickmarksSize (10), highlightStroke (transparent), clearto (transparent)
Segmented meter	clearto (transparent)
Semi-circular progress	colors (see below), backgroundColor (transparent), colorsStroke (transparent), highlightStroke (transparent), clearto (transparent)
Thermometer	colors (see below), colorsStroke (#000), tickmarksCount (0), shadow (false), highlightStroke (transparent),
Vertical progress bar	colors (see below), colorsStrokeInner (transparent), colorsStrokeOuter (black), backgroundColor (#fff), highlightStroke (transparent), corners (round), cornersRoundRadius (5)
Waterfall	colors (see below), backgroundBarsColor1 (transparent), backgroundBarsColor2 (transparent), backgroundGridVlines (false), backgroundGridBorder (false), colorsStroke (transparent), xaxis (false), yaxis (false), clearto (transparent)

Drawing API
Circle	highlightStroke (transparent)
Marker1	shadow (false)
Marker2	shadow (false)
Poly	shadow (false)
Rect	colorsStroke (transparent), highlightStroke (transparent), clearto (transparent)
Text	highlightStroke (transparent)

SVG
Bar	colors (see below), backgroundGridColor (#eee), backgroundGridVlines (false), backgroundGridBorder (false), colorsStroke (transparent)
Bipolar	colors (see below), backgroundGridHlines (false), backgroundGridBorder (false), xaxis (false, yaxis (false), highlightStroke (transparent)
Funnel	colors (see below), highlightStroke (transparent)
Gauge	backgroundFill (#aaa)
Horizontal bar	colors (see below), backgroundGridColor (#eee), backgroundGridHlines (false), backgroundGridBorder (false), colorsStroke (transparent), xaxis (false), yaxis (false), highlightStroke (transparent), lineShadow (false)
Line	colors (see below), backgroundGridColor (#eee), backgroundGridVlines (false), backgroundGridBorder (false), xaxis (false, yaxis (false)
Pie	colors (see below), colorsStroke (transparent), highlightStroke (transparent)
Radar	colors (see below), backgroundGridColor (#eee), highlightStroke (transparent), tickmarksStyle (null)
Rose	colors (see below), backgroundGridRadialsCount (0), colorsStroke (transparent), highlightStroke (transparent)
Scatter	colors (see below), backgroundGridColor (#eee), backgroundGridVlines (false), backgroundGridBorder (false), xaxis (false), yaxis (false), highlightStroke (transparent)
Semi-circular progress	colors (see below), backgroundGridColor (#eee), highlightStroke (transparent)
Waterfall	colors (see below), backgroundGridColor (#eee), backgroundGridVlines (false), backgroundGridBorder (false), colorsStroke (transparent)

Some (if not all) of the basic demos in the download archive have been made to be more basic - using few (if any) configuration options.
The majority of the charts have had their default colors changed and they now use the same set of colors. These new colors are all semi-transparent (or semi-opaque if you prefer) and there's more of them by default. The colors are:
```
[
    '#ff000088','#00ff0088','#0000ff88',
    '#ffc0cb88','#ffA50088','#00ffff88',
    '#00000088','#ffff6688','#00800088',
    '#ff00ff88','#ffff0088','#aaffaa88',
    '#ffaaaa88','#aaaaff88','#aaffff88',
    '#ffffaa88','#ffaaff88','#00ffff88',
    '#964B0088','#80808088','#00000088',
    '#ffc0cb88','#aaffaa88','#ffaaaa88',
    '#aaaaff88','#aaffff88','#ffffaa88',
    '#ffaaff88','#00ffff88','#964b0088',
    '#80808088','#00000088','#ffc0cb88'
]
```
The charts that haven't had their colors changed are: canvas Activity, canvas Horseshoe, canvas Segmented, SVG Activity, SVG Gauge, SVG Horseshoe and SVG Segmented. You can see the new colors on the default colors documentation page.

Backwards compatibility notes

There are notifications and advisories regarding backwards compatibility that you can read here: https://www.rgraph.net/canvas/compatibility.html

The changelog

Current release: June 2026 (7.20)

Backwards compatibility notes

Past release notes