A 3D Donut chart

View the bare-bones version of this demo with any interactive features or animations enabled

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):