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 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="float: right">[No canvas support]</canvas>This is the code that generates the chart - it should be placed AFTER the canvas tag(s):