A basic Pie chart

A simple Pie chart that shows off the label sticks to good effect. As far as the Pie chart itself goes there's not a whole lot to it - the tooltips and labels both use the same array (which is defined just above the chart itself).

The shadow is turned off (set to a transparent color) and the stroke color is also set to transparent. The Pie chart also uses the roundRobin animation effect.

With smaller screens the labels are disabled and a key is used instead. This takes up a little extra space so that the chart fits better in the available space.

The tooltips have been customised using formatted tooltips and the tooltipsCss property.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.key.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:

<div>
    <canvas id="cvs" width="350" height="250">[No canvas support]</canvas>
</div>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

<script>
    // A basic configuration for a Pie chart with just the labels
    // separated out into their own array. This is because the same
    // array is used for both the labels and the tooltips so
    // doing this makes for less upkeep when the time comes to
    // change things around.
    //
    // Also note that the stroke color has been set to transparent so
    // that there's no separation between the segments
    //
    labels = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

    new RGraph.Pie({
        id: 'cvs',
        data: [20,1,1,1,1,1,1],
        options: {
            
            // This is the tooltip property using formatted tooltips
            tooltips: '%{property:myDaynames[%{index}]}<br /><span style="font-weight: bold; font-size:26pt">%{value_formatted}',
            
            // The units that are appended to the %{value_formatted} value
            tooltipsFormattedUnitsPost: '%',
            
            // Turn the little triangular pointer off
            tooltipsPointer: false,
            
            // Turn fixed positioning off
            tooltipsPositionStatic: false,
            
            // Some CSS values that are set on the tooltips so that you can customise them
            tooltipsCss: {
                backgroundColor: 'white',
                color: 'black',
                border: '3px solid black'
            },

            // A custom property - the formatted tooltips can then
            // access this to use the data inside the tooltip
            myDaynames: labels,

            keyPositionGraphBoxed: false,
                
            responsive: [
                {maxWidth: null,width:550,height:250,options: {centerx: null,key: [],labels: labels},parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth: 750,width:420,height:250,options: {centerx: 150,key:labels, labels: []},parentCss:{'float':'none',textAlign:'center'}}
            ]
            
        }
    // Draw the chart and add responsive capabilities. On smaller screens the width
    // is reduced and the labels are changed to a key. This takes up less space.
    }).draw();
</script>