Fixed y-axis label width in Highcharts

Question

I\'m building a data presentation where two Highcharts charts are stacked vertically and are intended to share the same x-axis units and alignment. Like so:

Answer 1

If you set the chart.marginLeft option, it will override the auto size labels so the Y axes become aligned.

Answer 2

This is a late answer, but you can now do multiple charts inside the same Highcharts object. You wouldn't have to manually try to force the Y axes to align when using this method, as Highcharts would do all the work for you.

http://www.highcharts.com/demo/combo

Answer 3

A little hacky way, but should work:

• set for both xAxis width, e.g. 400px
• set for all axis (xAxis and yAxis) right, e.g. 20px

Now yAxis should have the same width and also the same extremes etc.

Another (and maybe even better) solution is to use two panes for Highcharts. It works exactly the same way as in Highstock, see example: http://www.highcharts.com/stock/demo/candlestick-and-volume