How can I force multiple y-axis in Highcharts to have a common zero

Question

See this JSFiddle. How do I get the y-axis zero to align?

Answer 1

An easy workaround until this feature is added is to make sure the ratio of max/min is the same for both axis. For example is the min and max for the primary y-axis are -20 and 40 for example, then the max/min ratio is -2. Now say we have a max value for the secondary y-axis of 25. If we set the min for this axis to 25/-2 (=-12.5), then the y=0 line will be aligned for the two axes.

Would be much nicer to have a flag to set this automatically though ;-)

EDIT: Some thing like below worked OK for me:

yAxis0Extremes = chart.yAxis[0].getExtremes();
yAxisMaxMinRatio = yAxis0Extremes.max / yAxis0Extremes.min;
yAxis1Extremes = chart.yAxis[1].getExtremes();
yAxis1Min = (yAxis1Extremes.max / yAxisMaxMinRatio).toFixed(0);
chart.yAxis[1].setExtremes(yAxis1Min, yAxis1Extremes.max);