Highcharts adding additional series and axis breaks existing yAxis min/max

Question

In the following fiddle (based on a Highcharts example), the first series shows correctly, taking up the entire height of the chart.

http://jsfiddle.net/markalroberts/h9j53yk4/4/

However, when you click the button to add a series, the existing series' scale is recalculated (not what I want).

The code I use to add the axis/series/data:

chart.addSeries({
        type: 'line',
        yAxis: 1,
        data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
    })

How can the existing series/yAxis combo be set to remain as it was originally and just have the new series plotted ontop (also scaled to use the entire height of the chart)

Update

As per Mike's answer, what I had to do was simply:

alignTicks: false

I think that your main problem is marginTop parameter. If you will set it to some value greater than 0 - for example 10, the problem should not exist anymore. Right now your last tick is on the start of your chart so you are seeing only part of this tick. The reason for updating this extremes is that your new yAxis ticks and your previous yAxis ticks should be on the same y positions. — Grzegorz Blachliński
@GrzegorzBlachliński - did you try this in the fiddle? I just tried it and it makes no difference setting the marginTop to 10. — Kram
I have updated the fiddle to make it clearer what I want to achieve.... and basing my example the example from the Highcharts website. — Kram
Look at this fiddle: jsfiddle.net/h9j53yk4/5 You can also use tickAmount to have the same number of ticks: jsfiddle.net/h9j53yk4/12 I hope it will help you with your problem. — Grzegorz Blachliński
@GrzegorzBlachliński ok! so the tickAmount setting starts to do what I want (in that it doesn't change the first series when the second is added), however it no longer calculates the max properly, nor does it honour the max if I set one! — Kram

Mike Zavarello Mike Zavarello · Accepted Answer · 2016-07-11T11:09:40

Working with multiple axes can be tricky. I found the answer by kjfagan in this Stack Overflow question helpful for your situation: Highcharts y-axis Ceiling not being respected.

What I did in your fiddle was first set only the initial y-axis and give it the minPadding: 0 and maxPadding: 0 attributes as per kjfagan's answer:

yAxis: [{ 
    visible: true, 
    startOnTick: false, 
    endOnTick: false, 
    maxPadding: 0, 
    minPadding: 0
}],

Next, in your buttion, event, I set the full set of attributes for the new axis here, including the minPadding and maxPadding attributes:

$('#button').click(function() {
    c.addAxis({ 
        visible: true, 
        startOnTick: false, 
        endOnTick: false, 
        maxPadding: 0, 
        minPadding: 0, 
        opposite: true });
    c.addSeries({yAxis:1})
    c.xAxis[0].series[1].setData(j.Lines[1].Data);
});

Lastly, as Grzegorz Blachliński thoughtfully suggested, I increased your marginTop for the chart itself.

In addition, I added alignTicks: false to prevent the chart from automatically adjusting the axes to one another's values, which can lead to some wonky or unexpected behavior, depending on what you're plotting.

chart: {
    marginTop: 20,
    alignTicks: false
},

Here's the modified version of your fiddle: http://jsfiddle.net/brightmatrix/h9j53yk4/9/

Please note that clicking the button more than once will add multiple instances of the new axis, which will appear as duplicate axis labels. You also had yAxis declared more than once in the chart options of your original fiddle; I removed the extra option.

One last thing: you'll notice the gridlines from both axes don't quite line up. The answer from Sualkcin in the question I cited above has information on how to handle that (see https://stackoverflow.com/a/23549591/2596103).

I hope this information is helpful for you.

Highcharts adding additional series and axis breaks existing yAxis min/max

1 Answers