Highcharts how to align two charts yAxis on the same line

Question

How to align two highcharts yAxis on the same line?

I'm having two charts on the same page one below other. Is there way in highcharts to specify yAxis of both the charts to start on the same line?

Actual:

Expected

Thanks in advance

Answer 1

In general, you can set static left margins by chart.marginLeft http://jsfiddle.net/BlackLabel/f3frd95v/

However, it's not great solution if we don't know how much space we need. In that case I suggest to update charts after render: http://jsfiddle.net/BlackLabel/f3frd95v/1/

var chart1 = Highcharts.chart('container', {
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});

var chart2 = Highcharts.chart('container2', {
  yAxis: {
    labels: {
      format: '{value}'
    }
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].map(function(p) {
      return p * 1e7;
    })
  }]
});

var leftMargin1 = chart1.plotLeft,
  leftMargin2 = chart2.plotLeft;

if (leftMargin1 > leftMargin2) {
  chart2.update({
    chart: {
      marginLeft: leftMargin1
    }
  });
} else if (leftMargin2 > leftMargin1) {
  chart1.update({
    chart: {
      marginLeft: leftMargin2
    }
  });
}