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