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 show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

A pink Pie chart

[No canvas support]

Another quite basic Pie chart that is predominantly a pinkish theme. All of the colors are defined using rgb values instead of hex values or named colors.

The linewidth is set to 2 so the resultant effect is a small amount of segment separation.

The labels are defined and the textSize option is enlarged slightly so that those labels are a little bit clearer.

It's quite a basic example of a Pie chart but the resulting aesthetic is quite nice. This goes to show that your charts don't need to be fancy to look good!


This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.pie.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="550" height="450">
    [No canvas support]
</canvas>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):
<script>
    // A pretty straight-forward Pie chart. The only thing to note here
    // really is the use of the linewidth property to create a small
    // segment separation effect. The default color for the stroke is
    // white so it just blends into the background of the page (the
    // default background color of the canvas tag is transparent).
    new RGraph.Pie({
        id: 'cvs',
        data: [3,7.9,2,10.3,11.1,1,63.9],
        options: {
            colors: [
                'rgb(51,102,204)',
                'rgb(220,57,18)',
                'rgb(255,153,0)',
                'rgb(16,150,24)',
                'rgb(153,0,153)',
                'rgb(0,153,198)',
                'rgb(221,68,119)'
            ],
            linewidth: 2,
            shadow: false,
            labels: ['3%','7.9%','2%','10.3%','11.1%','1%','62.9%'],
            textSize: 10,
            textColor: '#444'
        }
    }).draw();
</script>