How can I force multiple y-axis in Highcharts to have a common zero
I know it's been two year. However, I did found a better solution compare to exist solution which was given in previous answers. My solution is still using setExtremes to set min, max for yAxis but with better exception handling which are extremely good to show()
and hide()
any plot.
Solution: link
Github: link
The short answer is: you can't.
You can tweak axis scaling, padding, and tick positions and the like and possibly get what you want, but there is no setting to accomplish this.
There is a feature request though, that you can add your votes and/or comments to:
http://highcharts.uservoice.com/forums/55896-general/suggestions/2554384-multiple-axis-alignment-control
EDIT: OTOH, I have to mention that dual axis charts like this are most often a very poor way to show the data, and invites the user to make comparisons that aren't valid.
While most people are always trying to put everything in one chart, multiple charts are very often the better solution.
FWIW
You can set min / max value for first yAxis and use linkedTo to second axis, but I'm not sure if you expect this effect:
http://jsfiddle.net/qkDXv/2/
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
min:-250,
max:50
//linkedTo:1
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} mm',
style: {
color: '#4572A7'
}
},
opposite: true,
linkedTo:0
}],
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);