RGraph: Pie chart documentation

The pie chart can be used, for example, to represent something that is akin to percentages. ie A set of data that should be taken as part of a whole.

The example file is here. 

<script>
    window.onload = function ()
    {
        var data = [564,155,499,611,322];
    
        var pie = new RGraph.Pie('myPie', data);
        pie.Set('chart.labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno']);
        pie.Set('chart.linewidth', 5);
        pie.Set('chart.stroke', '#fff');
        pie.Draw();
    }
</script>

Available properties

You can use these properties to control how the pie chart.

chart.colors Colors to be used for the pie segments.
Default: ['rgb(255,0,0)', '#ddd', 'rgb(0,255,0)', 'rgb(0,0,255)', 'rgb(255,255,0)', 'rgb(0,255,255)', 'red', 'pink', 'black', 'white']
chart.linewidth The width of the stroke. By setting this to 5 (approx), and setting the strokestyle to your background color, it will make the pie chart look "exploded".
Default: #999		 chart.strokestyle The color of the seperating lines. By setting this to your background color, and setting the linewidth to approx. 5, it will make the pie chart look "exploded".
Default: 1
chart.labels An array of labels to be used for the chart.
Default: [] (an empty array)		 chart.shadow Whether a simple shadow effect is applied.
Default: false
chart.shadow.color The color of the shadow.
Default: rgba(0,0,0,0.5)		 chart.shadow.blur The severity of the shadow blurring effect.
Default: 3
chart.shadow.offsetx The X offset of the shadow.
Default: 3		 chart.shadow.offsety The Y offset of the shadow.
Default: 3
chart.gutter The gutter of the graph (for text labels).
Default: 25		 chart.linewidth By setting this to roughly 5, and setting the strokestyle to the same colour as your background colour,you will get a segment separation effect.
Default: 1
chart.title The title of the pie chart.
Default: none		 chart.text.size The size of the text.
Default: 12
chart.tooltips An array of tooltips, starting from the middle right (ie east) axis, and going clockwise sequentially.
Default: [] (An empty array) 		chart.highlight.style Can be either 2d or 3d and determines which style of segment highlighting is used in conjunction with tooltips.
chart.tooltip.effect The animated effect used for showing tooltips. Can be either fade or expand.
Default: fade 		chart.key An array of strings used as the key for the chart. This can be used in place of labels if you prefer.
Default: null (ie no key is drawn)
chart.key.background The background color of the key.
Default: white 		chart.key.shadow Whether the key casts a drop shadow.
Default: false
chart.contextmenu An array of context menu items. More information on context menus is here.
Default: [] (An empty array)		 chart.title.vpos This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null
chart.annotatable Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false 		chart.annotate.color If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black
chart.title.color The color of the title.
Default: black

You can set these properties by using the Set() method. Eg:

myPie.Set('name', 'value');