# An SVG Bar chart with a canvas background

This is an interesting mix - it's a regular SVG Bar chart that has been arranged to have a canvas background. Then a star-burst pattern is drawn on the canvas and is continually updated giving it a slow rotation effect. The Bar chart uses the `wave()` effect and and has the `labelsAbove` option enabled. However the position of the labels has been adjusted using the `labelsAboveOffsety` option so that the text appears at the top of the bars - and also it has been colored white so that you can see it.

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.svg.common.core.js"></script>
    <script src="RGraph.svg.common.tooltips.js"></script>
    <script src="RGraph.svg.bar.js"></script>

Put this where you want the chart to show up:

    <div id="outer" style="padding: 15px; display: inline-block">
        <canvas width="750" height="300" id="cvs_background"></canvas>
        <div style="width: 750px; height: 300px" id="cc"></div>
    </div>

    <style>
        div#outer {
            position: relative;
        }

        div#outer canvas {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 680px;
            height: 230px;
        }
    </style>

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