A simple bar-in-bar SVG HBar chart

This is an example of using two Horizontal Bar charts on the same SVG tag in order to achieve a bar-in-bar effect. The second, yellow HBar chart - the one that is on top - has a large vmargin setting so that the bars sit "inside" those of the HBar chart underneath.

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

This is the code that generates the chart:

<script>
    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [62,48,42,43,64,61],
        options: {
            gutterLeft: 30,
            gutterLeftAutosize: false,
            colors: ['blue'],
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            xaxisMax: 80,
            yaxisLabels: ['A','B','C','D','E','F']
        }
    }).draw();

    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [45,47,50,33,43,52],
        options: {
            gutterLeft: 30,
            gutterLeftAutosize: false,
            colors: ['orange'],
            backgroundGrid: false,
            xaxis: false,
            xaxisScale: false,
            xaxisMax: 80,
            vmargin: 10
        }
    }).draw();
</script>