# An SVG Rose chart with tooltips

Here we have a Rose chart that has been configured with unrqual segment sizes, a key, sequential colors, tooltips and margins around the segments.

This goes in the documents header:

    <script src="RGraph.svg.common.core.js"></script>
    <script src="RGraph.svg.common.key.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: 500px; height: 500px" id="chart-container"></div>

This is the code that generates the chart:

    <script>

        rose = new RGraph.SVG.Rose({
            id: 'chart-container',
            data: [8,6,4,3,8,6,3],
            options: {
                tooltips: ['Alf','Bertie','Charlie','Doug','Edgar','Frankie','Gary'],
                colors: ['blue','green','red','#aaa','black','brown','pink'],
                colorsSequential: true,
                //backgroundGridRadialsCount: 0,
                linewidth: 2,
                margin: '3deg',
                key: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                keyOffsety: 455
            }
        }).draw().on('tooltip', function (obj)
        {
            var tooltip = RGraph.SVG.REG.get('tooltip');
            var colors  = rose.properties.colors;

            tooltip.style.border = '4px solid ' + colors[tooltip.__index__]
        });

        RGraph.SVG.tooltips.style.backgroundColor = 'white';
        RGraph.SVG.tooltips.style.color           = 'black';
        RGraph.SVG.tooltips.style.fontWeight      = 'bold';
        RGraph.SVG.tooltips.style.boxShadow       = 'none';
    </script>