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