An SVG stacked Rose chart with unequal segment sizes

This is a mode of operation that the SVG Rose chart has but the canvas Rose chart does not. It's a stacked non-equi-angular variation - so as well as being stacked the angles of the segments are unequal too. It's appropriate for when you have data that has an extra dimension and which goes beyond just a straight-forward stacked or non-equi-angular Rose chart.

As well as the data being different to a regular Rose chart the background grid has been tweaked so that the radial lines that emanate from center outwards have been turned off with the backgroundGridRadialsCount property.

The variant property is the one that puts the chart into a non-equi-angular mode:

variant: 'non-equi-angular'

The chart doesn't have to be stacked - you can also create a non-stacked non-equi-angular Rose if that suits your data better.


This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.tooltips.js"></script>
<script src="RGraph.svg.rose.js"></script>
Put this where you want the chart to show up:
<div style="width: 600px; height: 500px" id="chart-container"></div>
This is the code that generates the chart: