Release notes for 2026

The release notes and information regarding upgrades that you should read for the 2026 releases. You should read this when you're upgrading from an older version of RGraph to a newer one in case something that affects you has changed.

June 2026 (v7.20)
March 2026 (v7.11)
January 2026 (v7.10)

June 2026 (v7.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)
Modal Dialog	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.

March 2026 (v7.11)

The front page has undergone a few changes in order to try and make the page a little more mobile-friendly. The website doesn't receive that many mobile visitors but Google does favour it these days.
The Dumbbell variant has been added to the both the canvas and the SVG Bar and Horizontal Bar charts. This allows you to switch regular Bar and Horizontal Bar charts to Dumbbell charts with just a single option. There are demos of the new Dumbbell charts in the download archive. You can also see an example of a Dumbbell chart on the RGraph blog.

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)
Use the demos/datagrid-search.html demo in the download archive to try these searches out.
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.

You can download RGraph here