Release notes for 2020

• October 2020 (v5.26)
• August 2020 (v5.25)
• June 2020 (v5.24)
• April 2020 (v5.23)
• March 2020 (v5.22)
• February 2020 (v5.21)

October 2020 (v5.26)

• Added the labelsValuePoint and labelsValueThousand properties to the canvas Gauge chart.
• The way that you create Bubble charts has been changed for this release and integrated into the Scatter chart. The Scatter chart documentation page has documentation about how to create Bubble charts now.
• There was a long-standing bug with the responsive function and anti-aliasing (it most likely has been present since the responsive function was added) where the anti-aliasing fix wasn't being reapplied when it needed to be. This has now been fixed.
• The SVG Bar, Horizontal Bar, Line, Scatter and Waterfall charts now all have the capability to show X and Y-axis titles. This has been a feature of the canvas libraries for some time but now the SVG libraries can show titles too. All of the relevant text configuration properties (ie font size color bold and italic) have also been added. For an example of just what properties have been added take a look at the SVG Bar chart documentation.
• The vertical positioning of the 3D Bar chart tooltips has been corrected (it was positioned incorrectly due to the 3D effect skewing). The Horizontal Bar chart and Bipolar chart have also been checked that they're using the correct positioning.
• Internally, the canvas libraries have used the RGraph.getTextConf function to get five text configuration properties (font size color bold italic). Now the SVG libraries have been moved over to their own version of this function (RGraph.SVG.getTextConf). This won't (shouldn't) affect you but does mean marginally smaller libraries and more consistent handling of the text configuration.
• If you had two Google Sheets reader blocks on the same page it could cause conflicts - this has now been resolved so you can do this:

  <script>
      new RGraph.Sheets('1ncvARBgXaDjzuca9i7Jyep6JTv9kms-bbIzyAxbaT0E', function (sheet)
      {
          // Create the first chart...
      });
      
      new RGraph.Sheets('1lxNzvAdToUP4u-3SAJFZs6oJccj5BXPt3VCLkyE7Z1w', function (sheet)
      {
          // Create the second chart...
      });
  </script>
  

• Internally, the variable that referred to the object properties (which was prop.xxx) has been tweaked to be properties.xxx. This won't (shouldn't) affect you and slightly improves the readability of the source code.
• The tooltips pointer is now added to the tooltip as a property. So if you wanted to get to it you could do this:

  // For canvas charts
  var pointer = RGraph.Registry.get('tooltip').__pointer__;
  
  // For SVG charts
  var pointer = RGraph.SVG.REG.get('tooltip').__pointer__;
  

August 2020 (v5.25)

• The default appearance for tooltips has changed in this release. Formerly they had a similar appearance to Windows tooltips. However, now the default colors are white text on a black background. Also, instead of appearing next to the pointer, they're positioned statically. For example, on a Bar chart, the tooltips are shown at the top of the bar with an arrow indicating the bar. Have a look through the demos and the documentation pages for examples (not all of the demos have tooltips though). The SVG charts have also been converted to this style of showing tooltips. This was mentioned on the RGraph blog here.
• Now, if your tooltips extend off the left or right of the screen, they will be arranged such that the tooltip pointer is no longer in the middle but at 10% of the width (or 90% if on the right-hand-side) and the tooltip will be moved accordingly.
• The Date/Time library MomentJS is now bundled with RGraph. This library should help out when you're dealing with dates and times and the RGraph.parseDate function does not suffice. You can read more about it on the MomentJS website.
• Some new properties have been added for tooltips:
  • tooltipsFormattedKeyColorsCss
    This property allows you to add CSS values to the tooltip key color blob. There's also a CSS class for the key color blob called: RGraph_tooltipsFormattedKeyColor You can use it by adding this to the pages CSS (or your websites CSS file):

    .RGraph_tooltipsFormattedKeyColor {
        border: 2px solid black;
    }
    

  • tooltipsPointer
    This property allows you to add a small pointer to the tooltip.
  • tooltipsPointerCss
    This property enables you to add CSS values to the tooltip pointer.
  • tooltipsPositionStatic
    Instead of the tooltip appearing at the same coordinate as the mouse pointer this property allows you to set the tooltips to appear at a fixed position (eg for a Bar chart it will normally be at the top of a bar).
• The canvas Bipolar chart now has a side flag in the return value of the obj.getShape method. This is 0 for a bar on the left of the chart and 1 for a bar on the right.
• Fixed a bug in the SVG Line chart that meant that not all tooltips were being shown when using tooltip templates.
• When you call the wave function of the Bar chart and there's only one bar it will now defer automatically to the grow effect instead. With only a single bar there's no difference between the two effects.
• Formatted tooltips can now contain the %{table} macro. This makes it easy to show a table in your tooltips. There are two properties that you can use to configure the table and pass it the data to show: tooltipsFormattedTableHeaders and tooltipsFormattedTableData You can read about them on the tooltips documentation page. The appearance of the table can be configured using CSS.
• The canvas Line chart now has four new tickmark styles:
  • diamond
  • enddiamond
  • filleddiamond
  • filledenddiamond
• Both the canvas and SVG Scatter charts have had a new property added: outofbounds If you're setting the Y-axis minimum and/or maximum values but you have points that fall outside these values and still want to show them then you will probably want to set this property to true.

June 2020 (v5.24)

• The SVG Line chart now supports three new properties: dashed dotted and dasharray. This allows you to specify your line(s) to be dotted, dashed and also give your own style of linedash. The dasharray should be an array of two numbers - the length of the dash and the length of the gap.
• The charts that have a Y-axis (ie the Bar, Gantt, Horizontal Bar, Line, Scatter, Waterfall charts and the drawing API Y-axis) before now rendered their Y-axis title in native canvas text. This was because vertical accessible text had positioning and alignment issues. Now that these have been resolved (in a previous release) these charts have been updated to use DOM text to render their Y-axis titles.
• In what was most likely a regression - the default for the Bar chart labelsAboveOffsetx property has now been set to zero.

April 2020 (v5.23)

• Added the labelsOffset property to the SVG Radar chart.
• A fix for the Rose chart has been supplied by Mike Robinson that fixes labels not being rotated when the anglesStart property is used.
• You can now use (certain) tooltip substitutions in the tooltipsCss values as well as in the tooltips themselves. This makes it even easier to customise how your tooltips look. So you could set the CSS like this:

  ...
  // Some colors used by the chart
  colors: ['red','green','blue'],
  
  // A custom property
  tooltipBackgroundColors: [
      'rgb(255,239,239)',
      'rgb(239,255,239)',
      'rgb(239,239,255)'
  ],
  
  // Some CSS values for the tooltips that use substitution
  tooltipsCss: {
      fontSize: '24pt',
      border: '3px solid %{property:colors[%{dataset}]}',
      backgroundColor: '%{property:tooltipBackgroundColors[%{dataset}]}'
  }
  ...
  

  You can also use the macros when you set tooltip CSS values like this:

  RGraph.tooltips.style.backgroundColor = 'black';
  RGraph.tooltips.style.color           = '%{property:colors[%{index}]}';
  

  • The canvas tooltips documentation (formatting macros can be used in SVG chart tooltips as well)
• The Line chart has had dataset tooltips added. These are just like regular tooltips but allow you to click anywhere on a line and get a tooltip. You can have one for every dataset that's on the chart. This feature uses the newer canvas function isPointInStroke so there are a few really old browsers (for example Internet Explorer 11) that don't support this function or feature.
• The Waterfall chart now supports having the X-axis positioned at the top of the chart as well as at the bottom and in the center.
• Both the canvas and SVG charts have had the tooltipsOffsetx and tooltipsOffsety properties added.
• 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.
• The canvas globalCompositeOperation reference page has been updated with an interactive demonstration. By using this you can see exactly how the different modes affect your drawings. The globalCompositeOperation reference page.
• The segmented bar chart demo has been updated so that it now uses the new dedicated class that's part of the Bar chart file. This new class handles all of the drawing for you and is part of the Bar chart file so you don't need to include any extra files. The segmented bar chart demo.
• Both the canvas and SVG Rose charts have had the formatted tooltips property %{value2} added. This is only applicable to you when you're displaying a non-equi-angular chart and allows you to show the second data piece (the value controlling the angular size of the segment).
• 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 index and dataset properties in the return value of the getShape method were reporting values the wrong way around. This has been corrected so you may need to adjust your code if you use these properties. Tooltips should not be affected. The 3D Rose chart demo.
• Various objects have had a label property added to their shape objects. A part of this was also to add the dataset2 property to the Bipolar chart. For some charts the label property makes no sense - ie the drawing API objects, the Fuel, Gauge, Horizontal Progress bar, Meter, Odometer, Radial Scatter, Scatter, Thermometer and Vertical Progress bar charts. The charts that do support it are: Bar, Bipolar, Funnel, Gantt, Horizontal Bar, Line, Pie, Radar, Rose and Waterfall charts.
• When the Line chart was using the arrow or filledarrow tickmark types and the spline option was enabled the arrowhead wasn't being angled correctly. This has now been remedied.
• Internally, some custom formatted-tooltips code has been moved to be de-centralised. This will lead to smaller downloads - but not by much.
• Fixed a very obscure bug that presented itself when using a PDF converter - not a web browser. Believe it or not, it was just down to a spurious trailing comma - which web browsers ignored.
• Finally fixed an old bug with the Rose chart which resulted in the tooltip hotspots not completely covering the visible segments. You can view the 3D Rose chart demo that's online for a demo. The 3D Rose chart demo.
• The canvas Funnel chart has had the labelsPosition property added to it. This means that instead of the labels being vertically aligned to the edges of the segments they can be aligned to the center of each section instead. The possible values are edge (the default) and section. The SVG Funnel chart already has this capability. The example on the Funnel chart documentation page has been changed to demonstrate this. The Funnel chart documentation page.
• Various charts have had the highlightStyle invert option added. Using this in conjunction with the highlightFill option to specify the color you can have the charts fade out the non-selected shapes instead of highlighting the focused bar. For a demo of this, you can see it at the link below. A Bar chart demo with a dark background.
• In the download archive, the line-banded-gradient.html demo has had the colors altered slightly. The line colors are now similar to the fill and there's a shadow to help you distinguish the two. Download the latest version of RGraph.

March 2020 (v5.22)

• The default for SVG text is now to have the pointer-events CSS property set to none (like the canvas libraries).
• The new car registrations demo has had formatted tooltips added to it - which look nice! Using the new formatted tooltips feature doesn't add code to your configuration - it allows you to significantly reduce the amount of code that you have and adds a lot of power to control your tooltips.
• The colors for various charts have been updated so that they no longer use gradients by default. These have been replaced by solid colors. So this means that if you use the default colors then your charts may change if you upgrade. You will just need to set the colors property to what you want to see.
• The ability for the Scatter chart to show trend lines has been added. You can see an example on the Scatter chart documentation page.
• Formatted tooltips have been added to RGraph. These add the ability to RGraph that allows you to significantly customise your tooltips and easily use the chart data in them. You can read more about them here.
• Internally, the RGraph path function has been updated and all of the calls to it from the various libraries have been updated to the new syntax. It now looks like this:

  // lw - linewidth
  // b - beginPath()
  // r - rect()
  // s - stroke()
  // f - fill()
  this.path(
      'lw % b r % % % % s black f red',
      linewidth,
      x, y, width, height
  );
  

  This call sets the lineWidth and draws a filled red rectangle with a black border/stroke.

  Here's a version of the RGraph.path function that you can easily incorporate into your own code: https://www.rgraph.net/blog/paths.html

  Or you could get the latest code for the function from the RGraph.common.core.js file. If you do the though it will need a tiny bit more massaging to make it work stand-alone.

• Added the line-nvd.html demo which is a canvas version of an existing SVG demo. This is a stacked and filled Line chart which, unlike the SVG version, traces each dataset sequentially.
• The textAccessiblePointerEvents default for the canvas charts has been changed to true, except for the Meter chart and the Odometer chart. This is due to them using angled text. This change means that, by default, you'll be able to select text (as in cut/copy/paste operations). If you don't like it you can always change it back by setting the textAccessiblePointerevents property to false.
• The RScatter labels are now offset by 25 pixels. You can change this by using the labelsRadiusOffset option.
• Added a Bar and Line chart demo that shows a moving average Bar & Line chart.
• The horizontal offset used for the SVG Pie chart sticks has been halved to 50px.
• The tooltipsCss property has been added. You can set this to an object that contains key/value pairs of CSS values to be used on tooltips (these settings apply only to that object's tooltips). For example:

  ...
  tooltipsCss: {
      fontFamily: 'Arial,Verdana,sans-serif',
      fontSize: '20pt',
      backgroundColor: 'black',
      color: 'white'
  },
  ...
  

  Notice that since it's JavaScript code (not CSS) you need to use the JavaScript versions of the property names - so for example backgroundColor instead of background-color.

• The Bipolar charts X-axis labels have been adjusted down slightly.

February 2020 (v5.21)

This release has many changes to the internals of RGraph - particularly the shape objects that each charts getShape function returns. So if you upgrade and you use this function you should definitely test your charts before you commit to the new version.

• The Line chart arrow and filledarrow tickmark styles now respect the tickmarksSize property.
• The Segmented meter variation of the Pie chart now has a valueDecimals property. The Segmented meter is now a stand-alone chart type.
• Fixed a bug with the adjustable SVG Gauge chart and Firefox - it wasn't fetching the cursor position correctly so adjusting didn't work correctly.
• Fixed a bug with the Pie/Donut 3D variants that meant that the shadow wasn't being drawn correctly.
• Lots of Internet Explorer 11 related bugs were fixed.
• 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 a single color.
• All of the margins have been synchronised at 35. This may cause your charts to shift a little if you upgrade but you can just set them back to what you want them to be with the marginLeft marginRight marginTop and marginBottom properties.
• 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 Bar, Horizontal Bar, Line, Gantt, Scatter and Waterfall charts and the drawing API X-axis now all use a common RGraph.drawXAxis function. It is, quite naturally, a large function - but also quite versatile because it supports all kinds of different options. As a result, some chart types have new options for their X-axis. Notably, the yaxisLabels option has been changed to the yaxisScale option, which turns on and off the Y-axis scale labels.
• The Bar, Horizontal Bar, Line, Gantt, Scatter, Waterfall charts and the drawing API Y-axis now all use a common RGraph.drawYAxis function. Again, it's a large function - but also quite versatile because it supports all kinds of different options. As a result. some chart types have new options.
• The innerHTML property that was used in a few places in the RGraph.common.core.js has been changed to the faster insertAdjacentHTML function.
• The property yaxisScaleZerostart has been removed. The scale now always starts with zero.
• The documentation for the canvas Scatter chart has been bolstered with clearer information about the format of the data array.
• A new feature that is coming in the next version of RGraph (which will be 5.22) and which has already been partially implemented in the Bar chart is formatted tooltips. There's a demo in the download archive called bar-tooltip-templates.html which demonstrates this exciting (!) new feature. You can read a little about it on the tooltips feature documentation page.

You can download RGraph here