# A Rose chart showing the mouseout event

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.rose.js"></script>

Put this where you want the chart to show up:

    <div style="padding: 15px">
        <canvas id="cvs" width="350" height="350">[No canvas support]</canvas>
    </div>

This is the code that generates the chart:

    <script>
        new RGraph.Rose({
            id: 'cvs',
            data: [12,18,10,9,6,20,18],
            options: {
                labelsAxes: 'n',
                margin: 5,
                colors: ['Gradient(white:rgba(255,0,0,0.9))'],
                highlightStroke: 'black'
            }
        }).draw().on('mouseover', function (e, shape)
        {
            shape.object.highlight(shape);

        }).on('mouseout', function (obj)
        {
            RGraph.redraw();
        });
    </script>