A Donut chart with a 3D look using gradients

Here we have a donut chart (which is itself a Pie chart with the variant option set to donut) which has had the colors manipulated (to a gradient) in order to give a 3D appearance to the donut. It also has a slight shadow to give it an extra bit of depth. And it uses the roundRobin animation effect along with segment separation (the exploded option).

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="475" height="350">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    new RGraph.Pie({
        id: 'cvs',
        data: [41,37,16,3,3],
        options: {
            colors: [
                'Gradient(#c00:red:#f66:red:#c00)', 
                'Gradient(#00c:blue:#66f:blue:#00c)',
                'Gradient(#0c0:#0f0:#6f6:#0f0:#0c0)',
                'Gradient(#c66:pink:pink:pink:#c66)',
                'Gradient(gray:#ccc:white:#ccc:gray)'
            ],
            variant: 'donut',
            linewidth: 5,
            exploded: 5,
            strokestyle: 'rgba(0,0,0,0)',
            align: 'left',
            shadow: true,
            shadowOffsetx: 2,
            shadowOffsety: 2,
            shadowBlur: 30,
            centerx: 185
        }
    }).roundRobin();
</script>