[Solved]-Chartjs - keeping 2 graphs aligned side by side-Chart.js

A Bit of Hackery :-)

Chart.js calculates the top and bottom coordinates of the chart area and then uses this to draw the chart (points, bars, lines...). So if we manage to set / override the bottom coordinate of this chart area we can lift up / push down the x axis.

This bottom coordinate is in <<myChart instace>>.scale.endPoint. So if we overwrite this before the chart is drawn we have control over where the x axis is drawn.

To do this we create a new chart type and override the draw function, like this.

Chart.types.Bar.extend({
    name: "BarAlt",
    draw: function(){
        this.scale.endPoint = 200;
        Chart.types.Bar.prototype.draw.apply(this, arguments);
    }
});

Instead of passing in a hard coded value (200) we could configure this via options. So

Chart.types.Bar.extend({
    name: "BarAlt",
    draw: function(){
        this.scale.endPoint = this.options.endPoint;
        Chart.types.Bar.prototype.draw.apply(this, arguments);
    }
});

and

ctx = document.getElementById("chart_a").getContext("2d");
mychart1 = new Chart(ctx).BarAlt(data, {
    endPoint: 200
});

In fact, if we size both charts to be of the same height and width, we could even set this option to be same as the endPoint from the chart with the larger labels, thus aligning the x axis', like so

#chart_a,
#chart_b {
    width: 320px;
    height: 350px;
}

and assuming chart_b had the large labels and we drew that first (as myChart2)

ctx = document.getElementById("chart_a").getContext("2d");
mychart1 = new Chart(ctx).BarAlt(data, {
    endPoint: mychart2.scale.endPoint
});

(and we don't have to use BarAlt for myChart2 because we don't need to control it's x axis position)

Now, all seems well and good, except for the fact that the bars seem to be animating from the original postion, which is a bit ugly. So we put in the easiest fix we can think of - turn off the animation!

ctx = document.getElementById("chart_a").getContext("2d");
mychart1 = new Chart(ctx).BarAlt(data, {
    endPoint: mychart2.scale.endPoint,
    animation: false
});

Working fiddle - http://jsfiddle.net/2kmf10hg/

I took the liberty of removing the 2nd set of charts.