Negative horizontal margin on a Bar chart

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

<script>
    marginLeft   = 75;
    marginBottom = 35;
    marginRight  = 75;
    marginTop    = 45;
    
    canvas = document.getElementById('cvs');

    // Draw the Y-axis that's positioned on the right-hand-side. It's colored
    // red so that it matches the color of the Line and it's therefore easier
    // to read the chart.
    axes = new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: canvas.width - marginRight,
        options: {
            textSize: 16,
            yaxisScaleMax: 10,
            yaxisPosition: 'right',

            // This is not just a normal space character - it comes from
            // the Windows 'charmap' program and is a non-breaking space.
            // This means that it doesn't get removed like normal space
            // characters do. You may need to get this character from
            // 'charmap' as when you copy the code from this page it
            // might be converted to a regular space - which is not the
            // same.
            yaxisScaleUnitsPre: ' ',

            yaxisScaleUnitsPost: 'ma',
            yaxisColor: 'red',
            textColor: 'red',
            yaxisLinewidth: 3,
            yaxisTickmarksLength: 5,
            marginBottom: marginBottom
        }
    }).draw();




    // Create the Y-axis that appears on the left-hand-side of the chart. It
    // has a different scale to the other Y-axis. It's colored gray so that
    // it's easier to tally with the correct Line and Bars.
    axes2 = new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: marginLeft,
        options: {
            textSize: 16,
            yaxisScaleMax: 20,
            
            // This is not just a normal space character - it comes from
            // the Windows 'charmap' program and is a non-breaking space.
            // This means that it doesn't get removed like normal space
            // characters do. You may need to get this character from
            // 'charmap' as when you copy the code from this page it
            // might be converted to a regular space - which is not the
            // same.
            yaxisScaleUnitsPost: 'ma ',

            yaxisColor: 'gray',
            yaxisLinewidth: 3,
            yaxisTickmarksLength: 5,
            marginBottom: marginBottom,
            marginTop: marginTop
        }
    }).draw();




    // Create the Bar chart. The marginInnerGrouped setting is set to
    // -15 and this is what gives the chart the overlapping appearance.
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [[4,8],[6,5],[5,4],[1,9],[4,8],[8,6]],
        options: {
            marginBottom: marginBottom,
            marginLeft:marginLeft,
            marginRight:marginRight,
            marginTop:marginTop,
            colors: ['red','gray'],
            backgroundGrid: false,
            yaxisScale: false,
            yaxisScaleMax: 20,
            yaxisScaleUnitsPost: '%',
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat'],
            responsive: [
                {maxWidth: null, width: 650, height: 250, options: {marginInnerGrouped: -15, marginInner: 30, textSize: 14}, callback:function () {axes.x = canvas.width - marginRight; RGraph.redraw();}},
                {maxWidth: 750,width: 450,height: 250,options: {marginInnerGrouped: -5,marginInner: 15,textSize: 12}, callback:function () {axes.x = canvas.width - marginRight; RGraph.redraw();}}
            ]
        }
    }).wave({frames: 30});





    // Create the Line chart (both lines are added by this Line chart).
    // It's a spline chart so that its curvy.
    line = new RGraph.Line({
        id: 'cvs',
        data: [
            [14,18,16,12,15,13],
            [10,16,13,19,16,20]
        ],
        options: {
            spline: true,
            backgroundGrid: false,
            tickmarksStyle: 'filledcircle',
            tickmarksSize: 7,
            linewidth: 5,
            marginLeft:marginLeft, 
            marginBottom: marginBottom,
            marginLeft:marginLeft,
            marginRight:marginRight,
            marginTop:marginTop,
            yaxisScale: false,
            colors: ['red', 'gray'],
            yaxisScaleMax: 20,
            yaxisScale: false,
            responsive: [
                {maxWidth: null, options: {linewidth: 5,tickmarksSize: 7,marginInner: 55}},
                {maxWidth: 750, options: {linewidth: 3,tickmarksSize: 3,marginInner: 30}}
            ]
        }
    }).trace();
</script>