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

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

Answer 2

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

Answer 3

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.

Answer 4

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



    });

Answer 5

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

Answer 6

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
        }],