A non-equi-angular stacked Rose

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 from a regular Rose chart the background grid has been tweaked so that the radial lines that emanate from the 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.

The tooltips are formatted and also use the tooltipsCss feature that allows css values to be set as-and-when the tooltips are shown.

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="float: right">
    <div style="width: 450px; height: 400px" id="chart-container"></div>
</div>

This is the code that generates the chart - it should be placed AFTER the div tag:

<script>
    // Create and configure the Rose chart
    new RGraph.SVG.Rose({
        id: 'chart-container',
        
        // Note the data - an array of two elements. We have the data as
        // the first element and the (relative) magnitude of the radius
        // as the second. Here the data is another array of
        // numbers (it can also be just a number) which means the Rose
        // chart is a stacked variation.
        data: [ [[4,8,2],14], [[3,6,8],19], [[1,6,9],6], [[4,5,3],7], [[2,1,7],9], [[7,2,5],6], [[8,4,3],23], [[4,7,9],7], [[3,2,3],9], [[5,7,3],4] ],

        options: {
            // Turn off the grid lines that emanate from center outwards
            backgroundGridRadialsCount: 0,
            colorsOpacity: 0.8,
            colors: ['red', 'blue','#f6f'],
            colorsStroke: 'rgba(0,0,0,0)',
            linewidth: 1,
            
            // Set the Rose chart to be a non-equi-angular variant
            variant: 'non-equi-angular',

            amargin: 0.05,
            labels: ['Alf','Bert','Craig','Doug','Edgar','Fred','Gary','Harry','Indigo','Jay'],
            tooltips: '%{property:labels[%{dataset}]}: <b>$%{value}</b>',
            tooltipsCss: {
                backgroundColor: 'white',
                color: 'black',
                border: '3px solid black',
                fontSize: '20pt'
            },
            tooltipsPointer: false,
            responsive: [
                {maxWidth: null, width: 450, height: 400,options:{labelsSize:16},parentCss: {'float': 'right',textAlign:'none'}},
                {maxWidth: 750,  width: 350, height: 300,options:{labelsSize:12},parentCss: {'float': 'none',textAlign:'center'}}
            ]
        }
    }).draw();
</script>