A gray Pie chart

Summary: A Pie chart using a gray theme and the responsive() functionality. Here, the labels have the value of each segment added before they're assigned to the chart - but only when you're viewing the larger version of the chart. For the smaller version the figures are removed from the labels.

[No canvas support]

Here's a gray themed Pie chart. It uses the responsive function in order to allow for smaller screens, the labels are bold and the text is slightly smaller than usual.

In terms of responsiveness, 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 (eg the background-color, color, font-size and text-align properties).

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="550" height="300">
    [No canvas support]
</canvas>

This is the code that generates the chart: