Backwards compatibility

Older notes are not available.

August 2025 (v7.00)

• This is a major version update to version 7.00 due to the introduction of scaling. This dramatically improves the aesthetics of charts - particularly the text. Because changes to the coordinate system were necessary (there are now twice as many pixels on your canvas tag than previously) you may find that things that you draw yourself are out of place. If this is the case then you just need to double (or in some cases halve) the coordinates that you use. If, however, the coordinates that you're using come directly from RGraph (for example, you might be highlighting something by using the obj.coords property) then you probably won't need to change anything as the coordinates that are in the obj.coords arrays are always as the shapes are drawn on the canvas.
• The default value for the titleBold property was changed to true. So your titles will be bold by default now. If you don't want this then you can set the value of the titleBold property to false in the chart configuration.
• The name of the Semi-Circular Progress "scale" property has been changed to "scaleVisible".
• The default value for the Line chart highlightDatasetLinewidth property has changed from null to 10.

June 2025 (v6.22)

• The filename of the datagrid library has been changed to RGraph.datagrid.js So you'll need to update the file paths of your <script> tags.
• The datagrid rowsSelectable properties have been removed. An alternative that's just as good is to have a checkbox or radio button as the first column of your datagrid. What you set the names of these checkboxes to varies depending on how your server-side scripts handle forms - but with PHP, for example, you could set the name of all of the checkboxes to myCheckboxes[] and the values to the id that identifies the row. And then, in your PHP script, you could access that by using $_POST['myCheckboxes'] and it would be an array of the values that were checked. Radio buttons operate similarly.

  There are new properties to help you have the radio button or checkbox checked when the row is clicked and they are: rowsClickCheckbox rowsClickCheckboxIndex rowsClickRadio and rowsClickRadioIndex

April 2025 (v6.21)

• The Pie chart internal property events has been changed to now be called eventsEnabled . With this being an internal property it shouldn't affect you.

December 2024 (v6.20)

• The Bipolar chart xaxisLabelsPositionEdgeTickmarksCount property has been updated to be xaxisTickmarksCount. There's some code that handles the name change if you use theset method to set the property or set it in the initial configuration of your chart.

June 2024 (v6.18)

• The RGraph.arrayClone function has been updated and reimplemented.
• The SVG Scatter chart has had reference issues with the data resolved. Please contact me via the support forum if you come across any issues.
• The last function that was added to the Array prototype has been removed. An easy way to get the last element of an array is to use the at function like this: myArray.at(-1)
• The coordsSpline variable on the Horizontal Bar chart object that gets populated with the coordinates of the Vertical Spline has been updated. It's now a dimension less than it was previously. This means that:
  • obj.coordsSpline is the variable that holds all the coordinates of all the splines (though only one is permitted).
  • obj.coordsSpline[0] is the variable that holds the coordinates of all the points on the first line (again, there's only one permitted).
  • obj.coordsSpline[0][0] is the variable that holds the xy coordinates of the first point on the line.
  • obj.coordsSpline[0][0][0] is the variable that holds the x coordinate of the first point on the line.
  • obj.coordsSpline[0][0][1] is the variable that holds the y coordinate of the first point on the line.
• RGraph.tooltips.css has been removed. Use the (documented) RGraph.tooltips.style instead.
• In order to skirt a bug with the new structuredClone function the default background color for the vprogress and hprogress has been changed to #eee

March 2024 (v6.17)

• The SVG Funnel chart background bars are now child elements of the svgAllGroup instead of the first background group.
• The Radar chart default appearance has been tweaked: The colors have been changed (black for the stroke color with a slight red fill, the linewidth has been set to 2, tickmarks have been enabled

December 2023 (v6.15)

• The canvas Gantt chart, the canvas Horizontal Bar chart and the SVG Horizontal Bar chart documentation have been tweaked and brought into line with the rest of RGraph in that the labelsInBar properties are now labelsInbar properties (capitalisation). There's compatibility code there to accommodate this change so there's no need to rush and change all of your code. In fact, from the next version (6.16) capitalisation in property names won't matter - you'll be able to use labelsInBar labelsInbar LABELSINBAR labelsinbar or even lAbElSiNbAr (!). And the same applies to all of the property names. I'd probably advise against the last one though - just for readabilities sake!
• The Gantt chart property labelsInbarBgcolor is now called labelsInbarBackground There's compatibility code there to accommodate this change so there's no need to change your code.
• The canvas Semi-circular Progress bar backgroundBackdrop and backgroundBackdropColor properties have been changed to backgroundFill and backgroundFillColor.
• The Meter chart labelsValueAccessible property now defaults to false (ie off).
• The beveled option has been removed from the Horizontal Progress bar and the Vertical Progress bar

July 2023 (v6.13)

• The Bar chart option labelsAbove was showing numbers incorrectly and not fully respecting the labelsAboveDecimals setting. This has now been remedied so if you use this option the figures on your chart may now show decimals where previously they didn't. Now, if you set the labelsAboveDecimals option to 1, then that's what you will see regardless of whether the number has decimals (eg 100.0).

February 2023 (v6.11)

• The labelsOffsetRadius property is now called labelsRadiusOffset. You don't need to upgrade immediately as there's some code in there to handle the name change.
• The canvas title code has been rewritten for this release so your title may require adjusting slightly. See the documentation for your chart for the exact properties to use.

January 2023 (v6.10)

• SVG chart types that allow the setting of shadows have had the shadowOpacity option removed and the shadowColor property added in its place. This affects the following SVG chart types: Bar, Bipolar, HBar, Line, Pie, Radar and Waterfall.

July 2022 (v6.08)

• A significant change in this release is a switch from using accessible text by default to using native canvas text. So from now on the website and the demos in the download archive have been set to not use the textAccessible option. The defaults in the libraries have also been set to not use the textAccessible feature. As a result of this your charts may look slightly different if you upgrade from a prior version and the text will not be selectable with your mouse. You can of course re-enable accessible text by setting the textAccessible option to true in your chart configuration.
• The Line chart dataset tooltips feature has been updated. You can see the updated HOWTO guide here and also there's a demo that runs on your computer in the download archive.

April 2022 (v6.07)

• The canvas Horizontal Bar chart has had some work done on it regarding the y-axis positioning so if you use the Horizontal Bar chart - upgrade cautiously!
• The frame count on the canvas Horizontal Bar chart animations have changed (the grow and the wave effects).

November 2021 (v6.05)

• The minimum and maximum labels on the Semi-circular Progress bar no longer fall back to the scale properties. This is because a proper scale has been added. This applies to both the canvas and SVG versions of the meter.

October 2021 (v6.03)

• Some of the demos were still using the older property name labelsPercent when it should actually be labelsComplete. If you still use the older labelsPercent option you should be aware of this if you upgrade and change to use the newer property name.

August 2021 (v6.02)

• The purpose of this release is because of Google updating the requirements for Google Sheets integration. You now need to update your code if you connect to Google Sheets to retrieve your data. There are detailed instructions on what you now need to do on the Google Sheets integration page.

April 2021 (v6.00)

• This is a significant version increase so you would expect a lot of breaking changes or tweaks - this however is not the case. The purpose of the version increase is because from version 6.01 features from javascript es6 will begin to be used (on an "as and when" basis). javascript ES 6 has been with us now for over five years and the likelihood is that your browser will support it since most auto-update these days. If you prefer though the last 5.xx version (which was 5.28) is available from the download page.
• The SVG Scatter chart outofbounds option default has been changed to true.

March 2021 (v5.28)

• The Rose chart property labelsOffset has been renamed to labelsOffsetRadius
• The Radar chart property labelsOffset has been renamed to labelsOffsetRadius
• The RScatter chart property labelsRadiusOffset has been changed to labelsOffsetRadius
• The Meter chart labelsRadiusOffset property has been renamed to labelsOffsetRadius
• The Meter chart labelsValueText* properties have been renamed to labelsValue*
• The Bipolar chart colors option has been changed - the colors red blue and yellow have been added to the start of the colors array. If you don't like this then you can set it back to the original colors array which is commented out in the source code. Simply open the Bipolar chart source file (RGraph.bipolar.js) and uncomment the colors option which is commented out. Search for the following text in the file and remove the // at the start of the line: //colors:

January 2021 (v5.27)

• The responsive function has been rewritten for this release to use the window.matchMedia function instead of the window.onresize event. This means that media queries are used in place of the onresize event. A consequence of this is that the list of screen size conditions is reversed - and should now be listed from largest to smallest like this:

  .responsive([
      {maxWidth: null,width:600,height:250,options:{marginInner: 10,textSize:12}},
      {maxWidth: 800,width:400,height:200,options:{marginInner: 5,textSize:10}}
  ]);

  Otherwise, the usage of the function is no different.

August 2020 (v5.25)

• The tooltips have changed significantly for this release. First of all the default appearance has changed to white on black - you can change this using the tooltipsCss property if you wish. Secondly, the positioning of the tooltips has changed to be static instead of positioned next to the mouse pointer. You can change this with the tooltipsPositionStatic property. And lastly, there's a small pointer added to tooltips now as well. You can disable this with the tooltipsPointer property. You can check the changelog page for details.

April 2020 (v5.23)

• A long-standing bug with angled accessible text has been resolved. However, as a result, if you use angled text your text may need adjusting.
• With the Waterfall getShape functions return value, the index and the dataset properties have been swapped. This means that the first bar on the Waterfall chart now has a dataset value of 0, the second has 1, the third has a value of 2 etc. The index value of each bar is 0.
• The Rose chart indexes that are returned by the getShape function have been updated. This may impact your code if you use it. The dataset and the index properties have been swapped for non-equi-angular charts.

February 2020 (v5.21)

• When using the drawing api x-axis and y-axis objects you should be aware that the color properties have changed. They're no longer called colors - they're now called xaxisColor and yaxisColor and they're not arrays but are now a single color.
• The drawing api y-axis property yaxisTickmarksAlign is now called yaxisPosition.
• The drawing api x-axis xaxisScaleInvert and xaxisScaleVisible properties have been removed.
• If you use the axes property to turn off both the X and Y axes you will now need to use both the xaxis and yaxis properties.
• The y-axis title is now placed on the same side as the axis.
• If you use the yaxisLabels property to toggle the y-axis scale you should now use the yaxisScale property instead.
• The *axisScaleZerostart properties for scales have been removed.
• The Line chart property yaxisScaleInside has been removed.
• On a Horizontal Bar chart if you use the property xaxisLabels to turn the labels off you may now need to use the xaxisScale property as well.

December 2019 (v5.2)

• The Bar chart axesColor axesLinewidth and axes properties are currently in a state of flux - ie they're in the middle of being removed and replaced with axis-specific properties. This means that in this release you'll need to add the following to your chart configuration to remove both of the axes:

  axes: false,
  xaxis: false,
  yaxis: false
  

  And to specify the linewidth for the axes you'll need to do this:

  axesLinewidth: 5,
  xaxisLinewidth: 5,
  yaxisLinewidth: 5,
  

  And to specify the color you'll need this:

  axesColor: 'red',
  xaxisColor: 'red',
  yaxisColor: 'red',
  

• The tag that's used for the x-axis labels has changed from labels to xaxis.labels If you use this you'll need to update your code.
• The Semi-circular Progress bar has had the names of the indexes changed that are returned by the getShape function. You can see what they now are by examining the Semi-circular Progress bar api documentation
• The Scatter chart getShape indexes for boxplots have been updated. So if you use these you may need to update your code.
• The Pie chart and the Rose chart shape object index names have been changed: angle.start is now angleStart, angle.end is now angleEnd, radius.start is now radiusStart and radius.end is now radiusEnd You'll need to adjust your code accordingly if you use these properties. They were changed so that they worked better as object property names.
• The shape objects that are returned by each objects getShape function do not now return any numeric indexes - so the only indexes that are returned are textual ones. This will make your code easier to read and understand. For example, the Bar chart now returns:

  var shape = obj.getShape(e);
  
  
  // If a bar/segment is matched the shape object will contain these indexes:
  //
  // shape.object          // The RGraph Bar chart object
  // shape.x               // The X coordinate for the rectangle
  // shape.y               // The Y coordinate for the rectangle
  // shape.width           // The width of the rectangle
  // shape.height          // The height of the rectangle
  // shape.dataset         // In a regular Bar chart the dataset is the same as the sequentialIndex
                           // In a grouped or stacked 
  

  Other charts will return different indexes and you can see what they are by inspecting the shape object in your browser's javascript console (ie console.log(shape);).
• The RGraph.filledCurvyRect and RGraph.strokedCurvyRect functions have been renamed to RGraph.roundedRect. To use this function you need to do the fill and/or stroke yourself like this:

  context.beginPath();
  context.strokeStyle = 'red';
  context.fillStyle   = 'black';
  RGraph.roundedRect({
      context: context,
            x: 50,
            y: 50,
        width:100,
       height: 100,
       radius: 25
  });
  context.stroke();
  context.fill();
  

• The RGraph.linearGradient function has had its argument list changed. It should now only be called using the object notation like this:

  RGraph.linearGradient({
      object: obj,    // The chart object
      x1: x1,         // The start X coordinate
      x2: x2,         // The end X coordinate
      y1: y1,         // The start Y coordinate
      y2: y2,         // The end Y coordinate
      colors: colors  // An array of colors to use in the gradient
  });
  

• The RGraph.radialGradient function has had its argument list changed. It should now only be called using the object notation like this:

  RGraph.radialGradient({
      object: obj,    // The chart object
      x1: x1,         // The start X coordinate
      x2: x2,         // The end X coordinate
      y1: y1,         // The start Y coordinate
      y2: y2,         // The end Y coordinate
      r1: r1,         // The start radius
      r2: r2,         // The end radius
      colors: colors  // An array of colors to use in the gradient
  });
  

October 2019 (v5.11)

• The SVG tooltips have had the line-height CSS property default changed to initial
.

September 2019 (v5.1)

• Please see the changelog for a list of changes that have been made to the libraries concerning the removal of older compatibility code.
• The Odometer chart property tickmarks has been changed to be disabled by default.
• The Odometer chart property tickmarksHighlighted has been changed to be enabled by default.
• The Odometer chart border property has been changed to be enabled by default. You may need to turn this off if you use a background image.
• The exec* option that you could add to your configuration, that executed a function there and then, has been removed. The exec function has NOT been removed and can still be used.
• The RGraph.text function should now be referred to as RGraph.text It should now also use only one argument like this:

  RGraph.text({
      object: obj,
      x: 50,
      y: 50,
      text: 'Some text'
  });
  

  Going forward, more and more functions will use this format for arguments (ie using a single object map instead of true multiple arguments.

August 2019 (v5.1)

• It shouldn't cause any issues for you - but I've added RGraph.text as an alias to RGraph.text2

May 2019 (v5.01)

• The hmargin property has been changed across all libraries to marginInner. As well as this, the hmarginGrouped property has been changed to marginInnerGrouped. You will need to change your code if you're setting this property otherwise it will revert to the default value.
• The sketch variant of the Bar chart has been updated to better respect the marginInner setting. There are two examples of this type of Bar chart in the demos in the download archive:
  • bar-sketch.html
  • bar-sketch-wedding.html
• The canvas RGraph.parseDate function has been updated to support more date/time formats - so if you use Scatter chart date/time charts or if you use this function you should check that your charts are OK. You shouldn't notice any difference though.
• The Waterfall chart textAngle property to xaxisLabelsAngle. You will need to update your code appropriately.
• The labelsAbove option for specifying a separator was spelled incorrectly and is now called this: labelsAboveSeparator

January 2019 (v5.00)

• This is big update - hence the version bump to 5.00. All of the chart types - both SVG and canvas - have been affected. Read about it on the RGraph blog.
• The Pie chart option labelsSticksUsecolors has been removed. You can still change the colors of the labels but as a whole (all of the labels) and not so that they match the colors on the charts.
• The labelsCenter option should now be the literal string that you want to show in the center of the Pie chart.
• The canvas Pie chart labelsSticksList property now defaults to true.
• The canvas Semi-circular Progress bar labelsMinOffsety and the labelsMaxOffsety options now both default to 5 instead of 0.
• The Pie chart option labelsSticksUsecolors has been removed.

February 2018 (v4.66)

• The SVG Line chart no longer sets the yaxisScaleMax or the yaxisScaleMin properties when they've been worked out.

November 2017 (v4.65)

• The Scatter chart coordinates have been significantly changed - you can read about them on the Scatter chart documentation page.
• All of the SVG charts have had the properties adjusted that are held in the obj.coords variable - specifically the object variable is now the RGraph object and the element variable is the SVG element that the coordinates represent. Each chart type's documentation page now details the coordinates.
• The canvas Bipolar chart has had a lot of work done to it this month. As well as now supporting grouped and stacked charts (plus 3D variants of both) the coordinates have been overhauled. You can read details of the Bipolar chart coordinates at this link.

August 2017 (v4.63)

• One of the canvas Pie chart default values was incorrect - the labelsSticksUsecolors value was true when the correct default is false. This has now been corrected.
• The format of the HTML key table id has changed. They now look like this: rgraph_key_e80a6674-488f-4e39-b022-314b9129d395 and are returned by the HTML key function.

October 2016 (v4.58)

• Formerly the Bubble chart draw function returned the underlying Scatter chart object. This has now changed so that the Bubble chart is returned.
• The color handling that the Horizontal Bar chart uses has changed. You may need to update your code accordingly. The colors are now used from the top down.

August 2016 (v4.57)

• My hosting had "a bit of funny turn" in August so please let me know if things don't work as expected.
• Previously, when you adjusted the Bar chart the bar being adjusted was the one under the mouse pointer - regardless of whether it was under the mouse pointer when you pressed the mouse button down. Now though the bar being adjusted remains being the one that you clicked on, regardless of whether you move the mouse left or right. There's an example of adjusting the Bar chart in the download archive (bar-adjustable.html).

July 2016 (v4.56)

• The textAccessiblePointerevents has had its default changed to true. You can change it back to false if you prefer it that way. This change makes it far easier to select and copy text if required.
• The Bar chart color defaults have been updated so if you don't set the colors yourself they may well change.
• Each get method of the libraries has been updated to use a slightly different way of parsing property names.
• The handling of decimal scales (eg 0, 0.02, 0.04, 0.06, 0.08, 0.10) has changed and they're no longer represented in exponential format.
• Scaled charts (including the drawing api X/Y axes) no longer have decimals appended to the zero value (eg Bar, Line, Scatter, Horizontal Bar, Waterfall). They also no longer use scientific notation (eg 5e3 ).
• The Horizontal Bar chart default colors have been changed to:

  [
      'red', 'blue', 'green', 'pink', 'yellow',
      'cyan', 'navy', 'gray', 'black'
  ]
  

  (no gradients)
• The Bar chart shadow default has been changed to false
• The Bar chart colors have been changed to:

  [
      'red', '#0f0', 'blue', 'pink', 'orange',
      'cyan', 'black', 'white', 'green', 'magenta'
  ]
  

• The colors of the Waterfall chart have been changed from gradients to solid colors (green, red, blue)

June 2016 (v4.55)

• Only the grid is now cached in the background drawing function. This shouldn't affect anything that you see but should cure a few obscure bugs.
• The option textAccessiblePointerevents now defaults to false
• The textAccessible option now defaults to true. You may need to disable this in a few circumstances (eg 3D Pie charts).
• Scaled charts are slowly being converted to have their scaleZerostart option to be enabled by default.
• The Pie chart default colors have been changed to solid (ie not graduated) versions of themselves
• The Bipolar chart scaleZerostart option now defaults to true.
• If you're manipulating the textAccessible span nodes then you need to know that the format for their IDs has changed and had an extra underscore added. An example ID is now: 82_25_100_cvs so the format is now X_Y_text_id - the X and Y coordinates of the text, the text that is shown within the span and the canvas id.
• The Bar chart animation functions now turn off the labelsAbove option whilst animating and turn it back on when done. By doing this performance is noticeably improved - particularly when using the textAccessible option.
• The RGraph.path api function has been updated. It is now faster and more versatile. See the API documentation for more details.
• With the Bar chart sketch variants, the bars are now drawn before the axes.
• The Line chart property scaleZerostart now defaults to true.
• The Scatter chart property scaleZerostart has been added and defaults to true. Therefore, you might see a zero now if you upgrade.
• Some of the Bar chart defaults have changed. The strokestyle option is now rgba(0,0,0,0), scaleZerostart is now true and the shadow option is now false.
• The tooltips no longer have a small pointer image underneath them. The positioning of the tooltip remains the same.
• Some of the Bar chart defaults have changed. The strokestyle option is now rgba(0,0,0,0), scaleZerostart is now true and the shadow option is now false.

April 2016 (v4.54)

• The Line chart lineVisible property is now an array instead of a boolean to accommodate the ability to show or hide individual lines. But you shouldn't set the property directly - use the hide(index), show(index) functions. There's also a visible(index) function.
• The clearto option now has a default of rgba(0,0,0,0) - this means that if you clear the canvas to a color (instead of it clearing to transparency) in effects and now it unexpectedly goes to transparent you may need to set the clearto option on your object to black (or whatever your chosen color is).

October 2015 (v4.50)

• Important Microsoft Internet Explorer 7 and 8 are no longer supported. As such ExCanvas has been removed from the archive. So now the minimum version of Internet Explorer that's supported is version 9.
• The Line chart trace effect is being removed - please use the trace2 effect instead. The trace2 effect does not require jquery.
• The Bipolar chart now has a background grid enabled by default. You can turn it off though with the backgroundGrid property
• The Bipolar chart function redrawBars has been removed
• The Gantt chart background grid has changed - you can control how many grid lines there are with these properties:
  • backgroundGridHlinesCount
  • backgroundGridVlinesCount

August 2015 (v4.32)

• Because the Bar chart 3D effect is different now you might well need a larger bottom margin.
• The Radar chart labels are no longer boxed by default. The order of the Radar chart internals has changed - labels are now drawn AFTER the chart itself so that the labels appear ON TOP of the chart. The code that draws the Radar chart axis labels has also been updated so that the labels now have a white semi-opaque background to them. This enhances readability.
• With the new style properties (eg backgroundGridColor instead of background.grid.color) it means that property names are no longer case insensitive. So use them as they're documented - ie don't add your own upper case characters as you wish. The case now matters.
• The Line chart labels.above option no longer uses units.pre or units.post - they use the separate labels.above.units.pre and labels.above.units.post
• The registry palette entry (which is the annotating palette div) is now called chart.palette (ie it has the chart. prefix like other registry entries)

June 2015 (v4.30)

• instead of using dots to separate the various parts of the configuration names (eg text.size and text.color) you can now instead use capital letters (eg textSize and textColor). The rest of the configuration name should be lower-case. This does mean that if you use upper case in your configuration names at present you'll need to stop and also change what you have. You can mix 'n' match configuration styles if you wish but I wouldn't recommend it. This is not a change that you need to rush and switch to - it's simply an alternative configuration method