score:13

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.

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

score:0

The simplest way is to just provide the same min/max for each axis. It would be a pretty simple to determine a good min/max based on the data before the plot call (combine the arrays, take the min/max round down/up to nearest int, would be my approach).

``````pretend this is code so I can link to jsFiddle
``````

Updated fiddle.

score:0

you can do it easily by following the below code-

you just need to find which point of opposite y -axis meets zero of first y-axis and set the min of opp y-axis to (that point * -1)

In my case yaxis[1] forms the main y-axis and yaxis[0] forms the opposite y-axis

`````` }, function(chart) { // on complete
var factor = chart.yAxis[1].min  / chart.yAxis[1].tickInterval
var tick = chart.yAxis[0].tickInterval;
var _min = chart.yAxis[0].tickInterval * factor
chart.yAxis[0].update({ min: _min });
chart.yAxis[0].update({ tickInterval: tick });

});
``````

score:0

I've had issue with all the answers as it didn't support values on negative Y axis. To center on 0, i applied below logic

Find min/max of the series and pad it so 0 comes in center

``````if(max > 0  && min < 0){
{
const diff = max + min;
if(diff > 0){
min = min - diff
}
else{
max = max + -1 * diff
}
}
else if (max > 0){
max = min * -1
}
else{
min = max * -1
}
``````

Then when defining axis on chart, use the min/max values from above, this will ensure 0 shows in center

score:1

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

score:7

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
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} mm',
style: {
color: '#4572A7'
}
},
opposite: true,
}],
``````

score:9

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);
``````