# An SVG Bar chart

A simple Bar chart that has a custom bolder-than-normal title font, uses colorsSequential and uses the grow effect. The number of frames that's used by the grow effect has been set higher (to 60) so it is slower than it is by default.

This goes in the documents header:

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

Put this where you want the chart to show up:

    <div style="padding: 15px">
        <div style="width: 750px; height: 300px" id="cc"></div>
    </div>

This is the code that generates the chart:

    <script>
        new RGraph.SVG.Bar({
            id: 'cc',
            data: [71,55,50,65,92,68,38,71,54,60,36,21],
            options: {
                title: 'A simple Bar chart ',
                titleFont: 'Impact, Arial Black, Arial',
                titleSize: 24,
                colors: ['#4F81BC','#C0504E','#9BBB58','#8064A1','#8064A1','#4AACC5','#F79647','#7F6084','#77A033','#33558B','#E59566','#4F81BC','#C0504E'],
                xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                colorsSequential: true,
                xaxis: false,
                yaxis: false,
                backgroundGridBorder: false,
                backgroundGridVlines: false
            }
        }).grow({frames: 60});
    </script>