With a Pie chart the segments all have the same radius. The Rose chart can be customised to show a Pie chart with variable radius segments
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.rose.js"></script>Put this where you want the chart to show up:
<div style="padding: 50px">
<canvas id="cvs" width="450" height="450" style="border: 1px solid #ddd">[No canvas support]</canvas>
</div>
This is the code that generates the chart:
<script>
new RGraph.Rose({
id: 'cvs',
data: [[15,6],[14,3],[15,5],[15,5],[15,1],[16,5],[16,5]],
options: {
gutterTop: 35,
gutterBottom: 35,
gutterLeft: 35,
gutterRight: 35,
variant: 'non-equi-angular',
backgroundGridColor: 'rgba(0,0,0,0)',
backgroundAxesColor: 'rgba(0,0,0,0)',
labelsAxes: '',
colorsAlpha: 1,
colors: ['red','blue','green','pink','black','yellow','cyan','brown'],
colorsSequential: true,
strokestyle: 'rgba(0,0,0,0)',
labels: ['Richard','Robert','Rico','Ray','Raife','Ryan','Roland'],
tooltips: ['Richard','Robert','Rico','Ray','Raife','Ryan','Roland'],
ymax: 16
//animationRoundrobinRadius: false,
}
}).roundRobin({radius: false});
</script>