.net Powerful JavaScript charts
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 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 »

An Activity meter chart

[No canvas support]

Formerly this interesting style of chart was a variant of the Pie chart that was created by using a custom class that resided in the Pie chart library. It also made use of the Rose chart in order to draw a circular background grid.

Now however it has been promoted to a full chart type - the Activity meter - so the code necessary is much smaller. By default, the Activity meter class creates a much different looking chart but with some configuration, you can achieve the style as it's shown here.

You can see the code that creates the chart below and how easy it is to implement.

You can use this style of chart to show one or more values that make more sense when they're arranged in a circle than in a horizontal or vertical arrangement.

If you want to add animation then the grow effect looks nice.

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.activity.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="400" height="400" style="float: right">[No canvas support]</canvas>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):
    activity = new RGraph.Activity({
        id: 'cvs',
        min: 0,
        max: 100,
        value: [28,19,39,45],
        options: {
            backgroundColor: 'transparent',
            backgroundGrid: true,
            backgroundGridColor: '#aaa',
            backgroundRings: false,
            colors: ['blue','gray','green','red'],
            labels: ['Month 1','Month 2','Month 3','Month 4'],
            labelsBold: true,
            labelsItalic: true,
            tooltips:                        'Result: %{key}',
             tooltipsCss:                       {
                fontSize: '20pt',
                textAlign: 'left'
            tooltipsFormattedKeyLabels:      ['Jenny','Richard','Dave','Kev'],
            ends: 'straight',
            labelsColor: 'black'
    setInterval(function ()
        activity.value[0] += RGraph.random(-10,10);
        activity.value[1] += RGraph.random(-10,10);
        activity.value[2] += RGraph.random(-10,10);
        activity.value[3] += RGraph.random(-10,10);
    }, 5000);