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