# A Donut chart with a 3D look using gradients

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',
                shadowOffsetx: 2,
                shadowOffsety: 2,
                shadowBlur: 3,
                centerx: 185,
                textAccessible: true
            }
        }).draw();
    </script>

« Back