A grouped Rose chart

Here we have a variation on a standard Rose chart which produces a grouping Here we have a variation on a standard Rose chart which produces a grouping effect. The property that causes the offset is called segmentsAngleOffset and on one Rose chart (there are two) it is set to -0.15 whilst on the other it is set at 0.15. This "rotates" one Rose chart backwards whilst the other is "rotated" forwards - thus giving you a grouping effect.

Both charts use the grow() animation effect so that both the red and the black segments both animate at the same time.

If you wanted to take this chart further you could set your Rose charts to be stacked ones and then you would have the custom grouping effect and the standard stacking effect.

Other customisations on this chart are custom tooltips - a large white font on a black background and a large font size for the labels. These customisations are done by setting the defaults - using this code:

RGraph.SVG.tooltips.style.color           = 'white';
RGraph.SVG.tooltips.style.backgroundColor = 'black';
RGraph.SVG.tooltips.style.fontWeight      = 'bold';
RGraph.SVG.tooltips.style.fontSize        = '20pt';
RGraph.SVG.tooltips.style.padding         = '15px';


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 id="cc" style="width: 1000px; height: 700px"></div>
This is the code that generates the chart: