RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »


Get the latest version of RGraph (version 6.18, 1st June 2024) 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.

More »


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.

More »

HOWTO: Use CSS3 animations

Note: When you're using the textAccessible option the canvas is wrapped in a div that contains the text. This means that you need to apply the animation CSS classes to this wrapper - not the canvas itself - otherwise the CSS effect will not include the text. If you're not using JavaScript to apply the effect (as this page is) you can wrap the canvas in a div and apply the effect to that (there's example code below) .

css3 animations are a very efficient way to add effects to your charts. Browser support is good (Chrome, Firefox, Opera, Safari, IE10+) and there are a lot of effects available. You can chain the effects by setting two to run sequentially.

The css3 effects library is available in the css folder of the download archive and it is authored by Daniel Eden.


If you wish to see a live example then there's a demo in the download archive calledeffects-css3-animations.html which shows these css animations in action.

Include the CSS3 animations file.

Including the css3 file is a simple matter of adding a link tag to your page header.

    <link rel="stylesheet" href="animations.css" type="text/css" media="screen" />


The animate.css file is quite large (over 60k) so if you only use certain effects from it you can take those effects out of the file and put them in your own css file. The front page of this website used to do this and, compressed (using gzip), the css that was necessary for the effect that was used (a modified bounceIn effect) came in at roughly 320 bytes.

Add the relevant CSS class to your canvas tag

This is just a case of adding a class attribute to your canvas tag.

    <canvas id="cvs" width="600" height="250" class="animated rotateIn">[No canvas support]</canvas>

Using CSS3 animations with the textAccessible option

If you're using css effects with the textAccessible option then you need to add the relevant css class to a wrapper div like the code shown here:

<div style="display: inline-block; width: 600px; height: 250px" class="animated rotateIn">
    <canvas width="600" height="250" id="cvs">[No canvas support]</canvas>

The exception to this is if you're applying the effect by using javascript. In this case you can just use the wrapper that RGraph creates like this:

    var div = document.getElementById('cvs').parentNode;

    div.className = '';
    div.className = 'animated hinge';

Note about using window.onload with animations

If you're missing part of your animation then it may be due to the window.onload event. If your canvas tag is near the top of the page then it will start animating immediately. However, if the javascript that creates the chart is using the window.onload event, which may not be triggered immediately, you may end up not seeing the start of your animation effect. You can mitigate this by using jquery to add the appropriate css classes after the call to the draw method.

$('#cvs').addClass('animated hinge');

Also, as a general rule, the jquery ready event (which utilises the underlying standard DOMContentLoaded event) will result in your charts being displayed quicker than the window.onload event.