How can I force multiple y-axis in Highcharts to h

Question

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

Answer 1

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 2

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

Answer 3

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

Answer 4

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



    });