# An SVG 100% Bar chart

By configuring your data (as is shown here) you can have your Bar chart take on the appearance of a 100% Bar chart. This chart does just that and also uses the grow animation effect.

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="width: 750px; height: 300px" id="chart-container"></div>

This is the code that generates the chart:

    <script>
        // Define the data
        data  = [[4,9,9],[8,6,4],[1,2,5],[5,6,2],[4,8,8],[3,2,5],[4,6,5]];

        // Calculate the percentages that the data represents
        data.forEach(function (v, k, arr)
        {
            var total = RGraph.SVG.arraySum(v);

            for (var i=0; i<v.length; ++i) {
                v[i] = (v[i] / total) * 100;
            }
        });

        new RGraph.SVG.Bar({
            id: 'chart-container',
            data: data,
            options: {
                gutterLeft: 50,
                colors: ['#c66','#6c6','#66c'],
                yaxisUnitsPost: '%',
                xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                grouping: 'stacked',
                hmargin: 20,
                linewidth:3,
                yaxisMax: 100,
                title: 'A 100% Bar chart'
            }
        }).draw();
    </script>