MENU
.net Powerful JavaScript charts

An introduction to and getting started with RGraph

Written by Richard Heyes, RGraph author, on 2nd November 2026
Confused as to what RGraph is or can do? This article will help you understand and introduce you to some basic usage.

Introduction

There are a plethora of JavaScript libraries that allow you to produce attractive charts on your website. Some using SVG, some using canvas and some, like RGraph, using both. Created by Richard Heyes (me) in 2008, RGraph now supports upwards of 40 different styles of charts across multiple different renderers (canvas, SVG, HTML). It's now the most popular charting library, erm, in my office [ahem] and can easily help you plot your data as charts on your website.

It's free to use - being available using the GPL Open Source license and there's a cheap commercial option available too if the Open Source option doesn't suit you.

What charts does RGraph support?

All the popular types - Bar charts, Line charts, Pie charts, Horizontal Bar charts, datagrids, tree structures across both canvas and SVG and also a few lesser known charts such as Rose charts and Marimekko charts. Have a look at the canvas documentation and the SVG documentation for more details. There's also over a thousand demos included in the download archive. Here are examples of a Bar chart, a Line chart and a Horizontal Bar chart that are created with RGraph. Click the buttons below each chart to animate them










These examples have tooltips that animate to the correct place, over the relevant bar or point, when you click a bar or hover over a point on the Line chart. These tooltips are just div tags so they can show any information or HTML that you want - text, images, video etc.

Here's the source code that goes into creating the Bar chart. You first need the RGraph libraries, then the canvas tag and then the JavaScript source code which creates the chart. 

<script src="/libraries/RGraph.common.core.js"></script>
<script src="/libraries/RGraph.common.dynamic.js"></script>
<script src="/libraries/RGraph.common.tooltips.js"></script>
<script src="/libraries/RGraph.bar.js"></script>

<div style="text-align: center">
    <canvas width="700" height="300" id="cvs"></canvas>
    <button type="button" onclick="myBar.wave()" style="cursor: pointer; font-size: 20pt">Animate!</button>
</div>

<script>
    myBar = new RGraph.Bar({
        id: 'cvs',
        data: [8,4,6,5,3,5,8],
        options: {
            _days: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            marginTop: 40,
            colorsSequential: true,
            textSize: 18,
            tooltips: '%{property:_days[%{dataset}]}: %{value}kg',
            tooltipsCss: {
                fontSize: '20pt'
            },
            title: 'Amount of fruit sold by day'
        }
    }).draw();
</script>

The RGraph website has lots of documentation that shows you everything there is to know about RGraph and takes you through creating all kinds of charts - from simple to more complex.

How to install RGraph

Actually installing RGraph is simple enough. As you can see in the example code above all you need to do is put the RGraph libraries on your website and then add the correct script tag into your page to reference them.

So here are the script tags that include the RGraph libraries in your page: 

<script src="/libraries/RGraph.common.core.js"></script>
<script src="/libraries/RGraph.common.dynamic.js"></script>
<script src="/libraries/RGraph.common.tooltips.js"></script>
<script src="/libraries/RGraph.bar.js"></script>

This assumes that the libraries are in a directory called libraries, in the root directory of your website - where your index.html page sits. You can change this of course - maybe you prefer a directory called javascript instead. Whichever name you choose though - be sure to update the path used in the script tags to match!

Then add the canvas (or SVG placeholder div) tag to your page like this:

CANVAS: 
<div style="text-align: center">
    <canvas width="700" height="300" id="cvs"></canvas>
    <button type="button" onclick="myBar.wave()" style="cursor: pointer; font-size: 20pt">Animate!</button>
</div>
SVG: 
<div style="text-align: center">
    <div style="width:700px; height: 300px" id="cc"></div>
    <button type="button" onclick="myBar.wave()" style="cursor: pointer; font-size: 20pt">Animate!</button>
</div>

They're just regular canvas and div tags with width, height and id attributes in the case of canvas and an id attribute along with the width and height specified in CSS for SVG. They don't have to sit inside div tags - these do, though, so that they can be centered easily. There's also standard HTML buttons below them that, when clicked, animate the charts using different effects.

And finally, there's the JavaScript code that creates the RGraph Bar chart object, configures it and draws the chart: 

<script>
    myBar = new RGraph.Bar({
        id: 'cvs',
        data: [8,4,6,5,3,5,8],
        options: {
            _days: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            marginTop: 40,
            colorsSequential: true,
            textSize: 18,
            tooltips: '%{property:_days[%{dataset}]}: %{value}kg',
            tooltipsCss: {
                fontSize: '20pt'
            },
            title: 'Amount of fruit sold by day'
        }
    }).draw();
</script>

Using a CDN for the RGraph libraries

As well as adding the JavaScript libraries to your website, you can also use a CDN if you prefer. The CDN that's provided is CDNjs, which is heavily hosted and run by CloudFlare and hosts a lot of different JavaScript libraries. You would change your JavaScript script tags to look like this: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/RGraph/7.21/RGraph.svg.common.core.js" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/RGraph/7.21/RGraph.svg.common.tooltips.js" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/RGraph/7.21/RGraph.svg.bar.js" >

Why use RGraph?

There are a few different reasons to use RGraph to make charts on your website:

  • It's easy to use!
  • It's powerful!
  • It's free!

RGraph can be incorporated into a plain JavaScript environment using code like what you see above. It can also be used with frameworks or library loaders and, as you can see above, it can be used by grabbing the libraries from CDNjs (or another CDN) so you don't need to install anything on your own webspace.

Even if you're not an experienced JavaScript developer you'll find it easy to create some really attractive charts using a small amount of JavaScript and HTML that shows your data in an easily-understandable way.

The charts are rendered using the HTML5 canvas tag and the HTML5 SVG tag - both of which are supported in all browsers (possibly excepting some truly ancient ones!).

All of the charts are very customisable using the many properties that are available - for example colors (which use standard CSS-style color definitions), margin sizes, tooltips, events and there's extensive API documentation available if you want to integrate it into your application.

The documentation on the RGraph website is extensive and there's no shortage of example charts and example code to help you. The download archive contains upwards of 1000 ready-to-go demo pages that you can examine either for coding hints or to get aesthetic inspiration from!

Last modified: 2nd November 2026