A segmented Bar chart
View the bare-bones version of this demo with any interactive features or animations enabled

Previously this type of chart was achievable but required custom coding. Now, however, (as of version 5.23) there is a custom class that does all of the necessary customisation for you. All you need to do is add the display customisations (as shown below).
The rear canvas
shows a Bar chart just as the front one does but
without any data - so you can just see the grid.
The front canvas
draws the Bar
chart - and then a custom draw
event uses the standard canvas
clearRect
function to return bits of the top canvas
to transparency. So
the grid on the rear canvas
then shows through.
All of this is done by the RGraph.SegmentedBar
custom class so, again, you just need to
customise it.
The responsive
function on the object just resizes the canvas
tag and the parent
container div
tag.
<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<div style="display: inline-block; position: relative; width: 600px; height: 250px; float: left"> <canvas id="cvs1" width="600" height="250" style="position:absolute; top: 0; left: 0">[No canvas support]</canvas> <canvas id="cvs2" width="600" height="250" style="position:absolute; top: 0; left: 0">[No canvas support]</canvas> </div>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):