A Bar chart with a negative horizontal margin

A combined Bar and Line chart using a negative horizontal margin. This gives the bars on the chart an overlapping appearance.

View the bare-bones, stripped-down version of this demo

[No canvas support]

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 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: 15px">
    <canvas id="cvs" width="750" height="500">[No canvas support]</canvas>
</div>
This is the code that generates the chart: