A 3D Donut chart

A variation of the Pie and Donut chart is to have it drawn in a 3D style. Here's an example of what to expect to see.

View the bare-bones, stripped-down version of this demo

[No canvas support]

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. and the textAccessible option is turned off.

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

In terms of responsiveness, 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="border: 1px solid #eee">
    [No canvas support]
</canvas>

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