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):