News and updates for 2021

News, updates and new techniques for both RGraph and also the HTML5 SVG and canvas tags.

2021  2020  2019  2018  2017  2015

A 3D Line chart demonstration

Written by Richard, 13th June 2021

Here's a novel new demonstration of a chart: A 3D Line chart with multiple datasets. This is not a natively supported type of chart - though the code to create it, whilst big, is not complicated and it's fully annotated so you should find it easy to follow.

The next release will feature it as part of the demos that come with RGraph which are located in the demos/ folder and it will be called: demos/line-chart-3d.html. Here's an image showing it and you can see the demo in its full glory by following the link below to a codepen of it.

A 3D Line chart
View the chart on

What's new with RGraph at the moment?

Written by Richard, 5th June 2021

It's been a month and a bit since the last release so here's an update on what's been added to RGraph recently. There's not a huge amount - but perhaps that's a sign that RGraph is close to being perfect...? Yes lets go with that.

Also, whilst not strictly a change to RGraph, it's definitely worthy of mention that RGraph can now be found on GitHub (the source control website used by many, many developers).

So there you go - not a great deal happening with RGraph at the moment but development is most definitely still occurring, albeit at a somewhat slower pace. I've pegged the next release for July - though if you can't wait you could grab the source code for a particular library from the GitHub repository (link above). If you do then remember that you may also need to get the common core library as well as the chart library that you want.

An attractive new Horizontal Bar chart demo

Written by Richard, 27th April 2021

Now that the majority of the demos are no longer online I've stopped making new demos as frequently - but here's a new Horizontal Bar chart demo that can be made with the existing release - version 6 - so you could take the source code that you see below and make your own demo if you wanted to. It's just a normal Horizontal Bar chart but it uses a vertical Bar chart behind it to get the background bars. It's animated though to see it you need to click the button that's below the chart (because when the page loads the chart is out-of-sight). Here's the chart:

[No canvas support]

<!-- Load all of the necessary RGraph libraries -->
<script src="RGraph.common.core.js" ></script>
<script src="RGraph.common.dynamic.js" ></script>
<script src="RGraph.common.tooltips.js" ></script>
<script src="" ></script>
<script src="RGraph.hbar.js" ></script>
  The chart itself only requires the canvas. The container DIV
  and the button are just there for the purposes of this website
  and the animation.
<div style="text-align: center; margin-top: 50px">
    <canvas id="cvs_hbar_fortune_500" width="820" height="250">[No canvas support]</canvas><br />
    <button style="font-size: 16pt; cursor: pointer" onclick="hbar_fortune_500.grow({frames: 45})">Animate!</button>
    // This is used for both the tooltips and the Y axis labels
    countries = ['US','China','Japan','France','Germany','Britain','Switzerland','Netherlands','South Korea','Canada','Australia','Italy','India','Brazil','Spain','Russia','Taiwan','Sweden'];
    // The data that's shown on the HBar chart
    data      = [134,103,52,29,28,25,15,12,15,11,8,9,7,7,9,5,7,3];

    // The Bar chart is used to get the background vertical bars
    bar_fortune_500 = new RGraph.Bar({
        id: 'cvs_hbar_fortune_500',
        options: {
            backgroundGrid: false,
            marginInner: 0,
            xaxis: false,
            yaxis: false,
            yaxisScale: false,
            marginBottom: 5,
            marginTop: 5,
            marginRight: 5,
            colors: ['#ccc']

    // The HBar configuration
    hbar_fortune_500 = new RGraph.HBar({
        id: 'cvs_hbar_fortune_500',
        data: data,
        options: {
            xaxisLabelsCount: 7,
            xaxisLabelsSize: 10,
            xaxisLabelsOffsety: 5,
            xaxisPosition: 'top',
            xaxisTitle: 'Number of Fortune 500 company\'s by country',
            xaxisTitleSize: 16,
            xaxisScaleMax: 140,
            yaxisLabels: countries,
            yaxisLabelsSize: 8,
            xaxis: false,
            yaxis: false,

            backgroundGrid: false,
            colors: ['black'],
            marginInner: 1,
            marginBottom: 5,
            marginTop: 5,
            marginRight: 5,
            // Use tooltip templates to specify the tooltips
            tooltips: '<i style="font-size: 12pt">July 2019 count:</i><br />%{global:countries[%{group}]}: %{global:data[%{group}]}',
            tooltipsPointer: false,
            tooltipsEvent: 'mousemove',
            tooltipsEffect: 'none',
            tooltipsPositionStatic: false,
            // Add some CSS that's applied to the tooltips
            tooltipsCss: {
                paddingTop: 0,
                backgroundColor: 'rgba(255,255,255,0.9)',
                color: 'black',
                border: '2px solid black',
                fontSize: '20pt',
                pointerEvents: 'none'
    // Add the responsive configuration so that the chart
    // fits on smaller screens
        {maxWidth: null, width: 600, height: 250},
        {maxWidth: 900, width: 400, height: 150}
    // Set the bar chart left margin to the same as the hbar.

Version 6.0 of RGraph is now available

Written by Richard, 10th April 2021
A new version of RGraph has been released

Happy release day! Version 6.0 of RGraph is now available. That's right - a major version increment!

There aren't, however, a bucket-load of breaking changes (I'm sure you'll be glad to hear). The reason for the major version increment is because, from version 6.01, I'll be starting to use features from JavaScript ES6 in the codebase.

I won't be going back and changing the entire codebase however - I'll be simply making use of the new features as-and-when the opportunity arises.

You can read the full list of changes on the changelog page and you can download RGraph as usual from the download page:

Download the new release of RGraph

RGraph is now on GitHub!

Written by Richard, 4th April 2021

After years of denial and confusion by it RGraph is finally available from GitHub. It's far from a complete switch and initially it will purely be me uploading each new release. But it's a start! Maybe one day my entire working process will be based around GitHub - though that won't happen any time soon.

Currently my working environment for developing RGraph is tied very closely to my hosting and the RGraph website which is based on a Linux environment. And trying to incorporate Git into that is not going to be a simple task.

But that will change given time I guess and hopefully it will become more tied to GitHub. But for now, I'll be updating GitHub with each new release - so the next update will be version 6.0.

View RGraph on GitHub here.

A new version of RGraph: version 5.28

Written by Richard, 1st March 2021

A new version of RGraph has been released

Happy release day! Both of you! The time has come, after two whole months, to bring out a new version of RGraph - version 5.28.

Not much has changed in this release but there are three new meters available - the Activity meter, the Horseshoe meter, and the Segmented donut. The Activity meter can show multiple values whilst the other two can both show a single value.

All of the new meters have different aesthetics and the Activity meter can be further customised to look how the old Radial Progress meter looked. There's a demo of this in the download archive.

Other changes include the addition of new and renames of existing properties for labels, additions to the default colors of the Bipolar chart, improvements to tooltip positioning for the Bar, Bipolar, Horizontal Bar and SVG Bar charts and the addition of a CSS class for the X axis labels (this may help when trying to retrieve the label DOM nodes with the API function document.getElementsByClassName()).

You can read the full list of changes on the changelog page and you can download RGraph as usual from the download page .

What's next for RGraph? Well - I'm planning to update the version number of RGraph from 5.28 straight up to 6.00 for the next release.

There won't be any ground-breaking changes - it will be a significant version increment because from the next release I plan to start using JavaScript ES6 features in the RGraph code.

This does not mean, however, that I'll be going back through all of the libraries and altering things. I plan to simply start making use of the new language features in new code. Some of the new features of ES6 that look interesting are:

A new year - a new version of RGraph!

Written by Richard, 3rd January 2021
A new version of RGraph has been released

Happy 2021 everybody! Lets hope that it's a better year than 2020 - but that won't be difficult to achieve will it?!

Let's start the year with a brand new fresh release of RGraph! So I've released version 5.27. This version features an overhaul of the responsive() function - changing it from using the window.onresize function/event to the newer window.matchMedia API. This is a programmatic way to install media queries using JavaScript.

The other additions and changes in this release are more minor and you can read about them in the changelog.

2021  2020  2019  2018  2017  2015