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: { marginLeft: 30, marginLeftAuto: false, colors: ['blue'], backgroundGridHlines: false, backgroundGridBorder: false, xaxis: false, xaxisScaleMax: 80, yaxisLabels: ['A','B','C','D','E','F'] } }).draw(); new RGraph.SVG.HBar({ id: 'chart-container', data: [45,47,50,33,43,52], options: { marginLeft: 30, marginLeftAuto: false, colors: ['orange'], backgroundGrid: false, xaxis: false, xaxisScale: false, xaxisScaleMax: 80, vmargin: 10 } }).draw(); </script>