See this JSFiddle. How do I get the y-axis zero to align?
7 Answers
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:
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
-
after 6 years still the answers is NO? In latest version are there any options which allows a common zero ?– MitzAug 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/…– jlbriggsAug 13, 2019 at 13:26
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);
-
I liked your solution! It worked perfect for me to align the graphs. Thanks for sharing...– OhlinOct 14, 2014 at 12:31
-
1Almost 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.– ZuksFeb 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. Jul 27, 2018 at 18:07
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:
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
}],
-
1I'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.– ΚαrτhικApr 19, 2013 at 12:12
-
3This 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.– jlbriggsApr 22, 2013 at 12:32
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 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.
-
3Assuming 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...– jlbriggsApr 19, 2013 at 0:20
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 });
});
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