A gray Pie chart
View the bare-bones version of this demo with any interactive features or animations enabled

Here's a gray-themed Pie chart. It uses the responsive
function to allow for smaller
screens, the labels are bold and the text is slightly smaller than usual.
In terms of
responsive
features, when the screen/browser is smaller the labels are changed to not have
the percentage appended to them, reduced in size and the labelsSticks
option is disabled.
Initially, the labels are simple strings that consist of operating system names (like this:
['Symbian','Blackberry','Android','iOS','Windows','Others']
)
But these labels then have the relevant percentage that is being represented appended to them
(for larger screens only).
The labels are bold too. The font that the labels are rendered in is set to
Lucida Grande
- though if this font is not on your system you may see the labels
rendered using Arial
instead.
The tooltips are created in the same way - just a little more verbosely. They're triggered
using the mouseover
event. The tooltipsCss
property is used to
set styles on the tooltips (ie the font-size
text-align
and
pointer-events
properties). The pointer-events
CSS
property is turned
off so that you can move the mouse pointer around and still see the correct tooltip even if another
tooltip is in the way.
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:
<div style="float: right"> <canvas id="cvs" width="550" height="250"<[No canvas support]</canvas> </div>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):