Negative horizontal margin on a Bar chart
View the bare-bones version of this demo with any interactive features or animations enabled

This is a demo of a combined (grouped) Bar and Line chart where the marginInnerGrouped
setting on the Bar chart has been set to -15
, This gives the appearance of the bars
overlapping each other slightly.
It has dual Y-axes
by utilising the drawing API
Y-axis
object and the colors have been specifically set
to what they are to link the bars and lines together.
The Lines also have slightly larger-than-normal tickmarks for a nicer aesthetic and the whole chart uses slightly larger-than-the-default text.
In terms of responsive
features, there's not much done by the Line chart - though there's a lot done
by the Bar chart - particularly to accommodate the Y-axis
objects. To make it easier to understand
you will do well to "un-minify" it and spread it across multiple lines.
This goes in the documents header:
<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script> <script src="RGraph.line.js"></script> <script src="RGraph.drawing.yaxis.js"></script>Put this where you want the chart to show up:
<div style="padding: 25px; display: inline-block; margin:20px"> <canvas id="cvs" width="650" height="250">[No canvas support]</canvas> </div>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):