A pink Pie chart

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>