Negative horizontal margin on a Bar chart
This is a demo of a combined (grouped) Bar and Line chart where the
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 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 responsiveness, 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):