A 3D Donut chart

Here's an example of a 3D Pie chart effect used in conjunction with the donut3d variation (use the variant property as shown below).

Other variants include: pie pie3d and donut

On this chart, the shadow is used to accentuate the appearance of depth.

The 3D effect is achieved by stretching the canvas in the horizontal direction - which is why the text looks stretched.

In terms of the responsive nature of the chart, when viewing on smaller screens the labels are switched to tooltips and a title is added to indicate as such.

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:

<canvas id="cvs" width="600" height="350" style="float: right">[No canvas support]</canvas>

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

<script>
    labels = ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'];

    // Create the Pie chart, set the donut variant and the rest of the
    // configuration. The variant property is what sets the chart to
    // be a Donut chart instead of a regular Pie chart.
    new RGraph.Pie({
        id: 'cvs',
        data: [4,8,6,3,5,2,5],
        options: {
            shadow: true,
            shadowOffsetx: 0,
            shadowOffsety: 5,
            shadowColor: '#aaa',
            variant: 'donut3d',
            labels: labels,
            labelsSticksLength: 15,
            labelsSticksLinewidth: 2,
            colorsStroke: 'transparent',
            tooltipsCss:{
                fontSize:'16pt'
            }
        }
    }).draw().responsive([
        {maxWidth: null,width:600,height:350,options:{radius: 100,labelsList: true, labels:labels,title:'',tooltips:null}},
        {maxWidth: 900,width:400,height:250,options:{radius: 90,labels: null,title: '(Click for labels)',tooltips:labels}}
    ]);
</script>