# A page showing a blocky black and red HBar chart

This is an example of a Horizontal Bar chart that has been customised to have a blocky appearance. The linewidth of the axes has been increased and the background grid has been disabled. Plus the labels have been bolded and the chart uses the wave effect.

This goes in the documents header:

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

Put this where you want the chart to show up:

    <div style="width: 400px; height: 450px" id="chart-container"></div></div>

This is the code that generates the chart:

    <script>
        new RGraph.SVG.HBar({
            id: 'chart-container',
            data: [[1,1],[1,2],[1,3],[1,4]],
            options: {
                grouping: 'grouped',
                yaxisLinewidth: 10,
                yaxisLabels: ['Kevin','Luis','Paul','Charles gy gu '],
                yaxisTextBold: true,
                xaxisMax: 6,
                xaxisLinewidth: 10,
                xaxisLabelsCount: 0,

                vmargin: 15,
                vmarginGrouped: 2,

                backgroundGrid: false,
                colors: ['red', 'black'],
                gutterLeftAutosize: false,
                gutterLeft: 150
            }
        }).wave();
    </script>