# 3D Pie chart

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.key.js"></script>
    <script src="RGraph.pie.js"></script>

Put this where you want the chart to show up:

    <div id="container" style="display: inline-block; position: relative">
        <canvas id="cvs" width="450" height="300">[No canvas support]</canvas>
    <div>

This is the code that generates the chart:

    <script>
        var colors = ['red','yellow','blue','cyan','green','pink','white','#ddd'];
        var data   = [4,5,5,7,5,8,4,9];
        var labels = ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'];

        for (var i=0; i<data.length; i++) {
            labels[i] = '{1}: {2}%'.format(labels[i], data[i]);
        }

        var key = RGraph.HTML.Key('container',
        {
            colors: colors,
            labels: labels,
            tableCss: {
                position: 'absolute',
                top: '50%',
                right: '-70px',
                transform: 'translateY(-50%)'
            }
        });

        new RGraph.Pie({
            id: 'cvs',
            data: data,
            options: {
                strokestyle: '#e8e8e8',
                variant: 'pie3d',
                linewidth: 2,
                shadowOffsetx: 0,
                shadowOffsety: 7,
                shadowColor: '#ddd',
                shadowBlur: 15,
                radius: 80,
                colors: colors
            }
        }).draw();
    </script>

« Back