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 3D Donut chart

[No canvas support]

Here's an example of a 3D Pie chart effect used in conjunction with the donut3d variation (use the variant property as shown below).

Other variants include: pie pie3d and donut

On this chart, the shadow is used to accentuate the appearance of depth.

The 3D effect is achieved by stretching the canvas in the horizontal direction - which is why the text looks stretched.

In terms of the responsive nature of the chart, when viewing on smaller screens the labels are switched to tooltips and a title is added to indicate as such.


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.pie.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="350" style="float: right">[No canvas support]</canvas>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):
<script>
    labels = ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'];

    // Create the Pie chart, set the donut variant and the rest of the
    // configuration. The variant property is what sets the chart to
    // be a Donut chart instead of a regular Pie chart.
    new RGraph.Pie({
        id: 'cvs',
        data: [4,8,6,3,5,2,5],
        options: {
            shadow: true,
            shadowOffsetx: 0,
            shadowOffsety: 5,
            shadowColor: '#aaa',
            variant: 'donut3d',
            labels: labels,
            labelsSticksLength: 15,
            labelsSticksLinewidth: 2,
            colorsStroke: 'transparent',
            tooltipsCss:{
                fontSize:'16pt'
            }
        }
    }).draw().responsive([
        {maxWidth: null,width:600,height:350,options:{radius: 100,labelsList: true, labels:labels,title:'',tooltips:null}},
        {maxWidth: 900,width:400,height:250,options:{radius: 90,labels: null,title: '(Click for labels)',tooltips:labels}}
    ]);
</script>