A gray Pie chart

Here's a gray-themed Pie chart. It uses the responsive function to allow for smaller screens, the labels are bold and the text is slightly smaller than usual.

In terms of responsive features, when the screen/browser is smaller the labels are changed to not have the percentage appended to them, reduced in size and the labelsSticks option is disabled.

Initially, the labels are simple strings that consist of operating system names (like this: ['Symbian','Blackberry','Android','iOS','Windows','Others']) But these labels then have the relevant percentage that is being represented appended to them (for larger screens only).

The labels are bold too. The font that the labels are rendered in is set to Lucida Grande - though if this font is not on your system you may see the labels rendered using Arial instead.

The tooltips are created in the same way - just a little more verbosely. They're triggered using the mouseover event. The tooltipsCss property is used to set styles on the tooltips (ie the font-size text-align and pointer-events properties). The pointer-events css property is turned off so that you can move the mouse pointer around and still see the correct tooltip even if another tooltip is in the way.

This goes in the documents header:

<script src="RGraph.common.core.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 style="float: right">
    <canvas id="cvs" width="550" 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>
    // Here's the data, the labels and the tooltips that have been separated
    // out from the configuration in order to aid clarity
    data         = [41.2,18.2,17.2,14.2,5,4.2];
    labels       = ['Symbian','Blackberry','Android','iOS','Windows','Others'];
    labels_small = RGraph.arrayClone(labels);
    labels_large = RGraph.arrayClone(labels);
    tooltips     = [];
    
    // This bit of code loops through the labels and adds the relevant value
    // to them. Normally a forEach() loop doesn't tend to get recommended
    // because a function gets created for each iteration  (even though
    // functions are cheap in JavaScript) so it suffers performance wise -
    // but this isn't in a loop and there's not many data points so it's
    // not too bad to use here.
    labels.forEach(function (v, k, arr)
    {
        // Add the market share to the tooltip
        tooltips[k] = '<b>{1}</b><br /><i>Market share: {2}%</i>'.format(
            labels[k],
            data[k]
        );
        
        // Add the values from the data to the labels
        labels_large[k] = labels[k] + ' ' + data[k] + '%';
    });


    // Create the Pie chart and give it the tooltips and the labels that
    // were created above. The roundRobin() animation effect is used to
    // display the chart.
    new RGraph.Pie({
        id: 'cvs',
        data: data,
        options: {
            marginTop: 50,
            
            // Set the values that were created above as the tooltips
            tooltips: tooltips,
            
            // Some default styles for the tooltips
            tooltipsCss: {
                fontSize: '16pt',
                textAlign:'left',
                pointerEvents: 'none'
            },

            labels: labels_large,
            labelsBold: true,
            labelsColors: ['black'],
            textFont: 'Lucida Grande, "Lucida Sans Unicode", Arial',
            textSize: 10,
            textColor: 'black',
            shadow: false,
            colors: ['#F0F0F0','#08306B','#D9D9D9','#BDBDBD','#969696','#D9D9D9'],
            colorsStroke: 'rgba(0,0,0,0)',
            tooltipsEvent: 'mousemove',
            highlightStyle: 'outline',
            title: 'Smartphone share in Q2 2010',
            titleSize: 18,
            responsive: [
                {maxWidth: null, width: 550, height: 250, options: {labelsList: true, labels: labels_large,textSize:10},parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth: 900, width: 350, height: 250, options: {labelsList: false, labels: labels_small,textSize:8},parentCss:{'float':'none',textAlign:'center'}}
            ]
        }
    }).draw();
</script>