14

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

7 Answers 7

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.

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

2
  • after 6 years still the answers is NO? In latest version are there any options which allows a common zero ?
    – Mitz
    Aug 13, 2019 at 10:20
  • @Mitz - I entered this feature request more than 7 years ago, and it is currently the 'top idea' on the uservoice site. It is not part of Highcharts native still, but there is a plugin offered: highcharts.uservoice.com/forums/55896-highcharts-javascript-api/…
    – jlbriggs
    Aug 13, 2019 at 13:26
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);
6
  • I liked your solution! It worked perfect for me to align the graphs. Thanks for sharing...
    – Ohlin
    Oct 14, 2014 at 12:31
  • 1
    Almost perfect answer. The only problem is that it seems to assume only positive values. I am trying to use it to make a negative axis sensitive one and will share it if I manage.
    – Zuks
    Feb 8, 2017 at 9:13
  • @Zuks Exactly looking for the same but with negative and positive values as well. Did you find a good algorithm yet? Also it should be checked which axis should actually be updated, based on which has the higher/lower ratio. In this example, axis 1 is always adjusted, but it might be different with other values as in this example. I am working on the same right now. However, this answer is definitely a good starting point. May 13, 2017 at 11:09
  • It's also possible that the maximum needs adjustment and not the minimum, depending on the actual values. May 13, 2017 at 11:16
  • I used this solution but had to put chart.yAxis[1].setExtremes(); before the first line because I was refreshing the chart with fresh data and without this line there was residual affects of the previous 'setExtremes' call.
    – amackay11
    Jul 27, 2018 at 18:07
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
            //linkedTo:1
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true,
            linkedTo:0
        }],
2
  • 1
    I'm unable to duplicate the result for some reason. I guess the linkedTo causes the scales to become proportional and so a large value in one series causes the rest to get squashed. I'm trying to get the scales to be independent, yet have the zero align up. Not sure if my requirement is even feasible. Apr 19, 2013 at 12:12
  • 3
    This solution, like the other provided above, relies on series with equal scales, which is most often not the case if someone is using a dual axis chart.
    – jlbriggs
    Apr 22, 2013 at 12:32
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
Github: link

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.

1
  • 3
    Assuming that you have data with equivalent units, that would be a great solution. Most often, if you are making a chart with multiple axes, that is not a fair assumption at all...
    – jlbriggs
    Apr 19, 2013 at 0:20
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 });



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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.