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