About
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 »

 

Download
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 »

 

License
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 »

CSS animations

View example on CodePen

The css effects library provides you with various wipe-ins and wipe-outs that you can use with your charts. There's a list of available effects listed below. To use them you need to include the library and then, instead of calling the draw function, call the applicable effect function. There's an example of some code below with the bit highlighted in green that triggers the effect instead of the regular draw function.

<script>
    new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [4,8,6,6,3,5,2],
        options: {
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            marginInner: 20,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxis: false,
            colors: ['Gradient(red:orange)']
        }
    }).fadeslidein({frames: 60});
</script>

CSS3 animations

The RGraph download includes with it a set of css3 animations. These are pure css and only require you to include a single extra css library. The tag to include the library is shown below and then you can add the animated class to your div tag, along with the desired effect class too. There's a Bar chart demo that shows the available effects.

The code to include the Animate library:
<link rel="stylesheet" href="animate.css" type="text/css" media="screen" />
And an example div tag (the chart container):
<div style="width: 650px; height: 300px; display: inline-block" id="chart-container" class="animated expand"></div>

Available effects

There are a number of effects that are available in the Animation.css library along with two custom ones that are specific to the RGraph library. All of the effects are shown below.

External links