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:

Notice that since the y-axis ranges are different for the two charts, the y-axis labels are different widths and thus the charts themselves are slightly different widths breaking the nice x-axis alignment.

It would be great to be able to fix the width of the chart (or conversely the y-axis labels) to ensure the two charts line up. I explored the api and played a bit with setting styling directly on the various generated elements but no luck. It seems possible to maybe achieve this goal using a custom label formatter, but the stock formatter (as in if I define nothing custom) works quite well for abbreviating large numbers and such.

Ideas as to how to fix the chart or y-axis label width?

Answer 1

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

Answer 2

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

Answer 3

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