# A grouped horizontal bar chart

This horizontal Bar chart demonstrates the new vmargin and vmargin.grouped settings. The vmargin is either side of the group of bars whilst vmargin.grouped is between the bars in that group.

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.common.tooltips.js"></script>
    <script src="RGraph.common.key.js"></script>
    <script src="RGraph.hbar.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="600" height="600">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

    <script>
       window.onload = function ()
       {
            var hbar = new RGraph.HBar({
                id: 'cvs',
                data: [[8,6,4,3], [4,8,3,5],[4,9,9,7],[6,5,3,4],[3,7,8,8]],
                options: {
                    grouping: 'grouped',
                    hmargin: 20,
                    labels: ['Charlie','Jake','Luis','Jack','Bernie'],
                    key: ['Monday','Tuesday','Wednesday','Thursday'],
                    keyPosition: 'gutter',
                    keyPositionGutterBoxed: false,
                    keyColors: ['#3366CC','#DC3912','#FF9900','#109618'],
                    colors: [
                        'Gradient(white:#3366CC:#3366CC)',
                        'Gradient(white:#DC3912:#DC3912)',
                        'Gradient(white:#FF9900:#FF9900)',
                        'Gradient(white:#109618:#109618)'
                    ],
                    textSize: 16,
                    textAccessible: true,
                    scaleZerostart: true,
                    noxaxis: true,
                    tooltips: [
                        'Monday','Tuesday','Wednesday','Thursday',
                        'Monday','Tuesday','Wednesday','Thursday',
                        'Monday','Tuesday','Wednesday','Thursday',
                        'Monday','Tuesday','Wednesday','Thursday',
                        'Monday','Tuesday','Wednesday','Thursday'
                    ]
                }
            }).draw();
       };
    </script>