A page showing the various X scale variations of the SVG grouped Horizontal Bar chart

There's a few Horizontal Bar charts on this page that all demonstrate the various scale combinations that you can have with the grouped Horizontal Bar chart.





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-container1"></div></div>
<div style="width: 400px; height: 450px" id="chart-container2"></div></div>
<div style="width: 500px; height: 550px" id="chart-container3"></div></div>
<div style="width: 500px; height: 450px" id="chart-container4"></div></div>
<div style="width: 500px; height: 450px" id="chart-container5"></div></div>
This is the code that generates the chart:
<script>
    new RGraph.SVG.HBar({
        id: 'chart-container1',
        data: [[-5,-6],[-7,-8],[-9,-10],[-11,-12],[-13,-14],[-15,-15]],
        options: {
            xaxisScaleMax: -5,
            xaxisScaleMin: -15,
            yaxisLabels: ['Harry','Lucy','Pete','Nick','Al','John'],
            title: 'Both min and max negative',
            vmargin: 10,
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            marginRight: 50,
            marginLeft: 10,
            marginLeftAutosize: false
        }
    }).draw();
    
    new RGraph.SVG.HBar({
        id: 'chart-container2',
        data: [[1,2],[3,4],[5,6]],
        options: {
            yaxisLabels: ['Harry','Lucy','Pete'],
            title: 'Min set to zero and max positive',
            vmargin: 25,
            backgroundGridHlines: false,
            backgroundGridBorder: false
        }
    }).draw();


    new RGraph.SVG.HBar({
        id: 'chart-container3',
        data: [[10,9,8],[7,6,5],[4,3,2],[1,0,-1],[-2,-3,-4],[-5,-6,-7],[-8,-9,-10]],
        options: {
            xaxisScaleMin: 'mirror',
            yaxisLabels: [
                'Harry','Lucy','Pete','Nick','Al','John','Kerridge',
                'Harry','Lucy','Pete','Nick','Al','John','Kerridge',
                'Harry','Lucy','Pete','Nick','Al','John','Kerridge'
            ],
            title: 'Min negative and max positive',
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            colors: [
                'red', 'blue','green',
                'red', 'blue','green',
                'red', 'blue','green',
                'red', 'blue','green',
                'red', 'blue','green',
                'red', 'blue','green',
                'red', 'blue','green'
            ],
            colorsSequential: true,
        }
    }).draw();

    new RGraph.SVG.HBar({
        id: 'chart-container4',
        data: [[5,6,7],[8,9,10]],
        options: {
            title: 'Both min and max above zero',
            yaxisLabels: ['Ken','Larry','Kevin','Jobe','Lucy','John'],
            xaxisScaleMin: 5,
            xaxisScaleMax: 10,
            backgroundGridBorder: false,
            backgroundGridHlines: false
        }
    }).draw();


    new RGraph.SVG.HBar({
        id: 'chart-container5',
        data: [[-1,-2,-3],[-4,-5,-6],[-7,-8,-9],[-10,-10,-10]],
        options: {
            marginLeftAutosize: false,
            marginLeft: 10,
            marginRight: 75,
            title: 'Zero max and negative min',
            yaxisLabels: ['Ken','Larry','Kevin','Charles'],
            xaxisScaleMin: -10,
            xaxisScaleMax: 0,
            vmargin: 25,
            backgroundGridBorder: false,
            backgroundGridHlines: false
        }
    }).draw();
</script>