Highcharts y-axis Ceiling not being respected

Question

I have a problem with Highcharts where the Ceiling of one of my two y-axes is not being respected.

Y-axis "1" represents percentage values, so has a Floor of 0 and a Ceiling of 100.

Y-axis "2" represents monetary values, so has a Floor of 0 and a Ceiling of null.

For some reason, the labels for y-axis "1" go up to 150.

If I change the corresponding series data so that the value 0 is changed to 20, the problem seems to go away and the labels stop at 100 as they should.

var dataX = [0, 67,  43, 100, 100, 80];
var dataY = [950, 900, 807, 650, 600, 450];

$(function () {
    $('#container').highcharts({

        series: [{
            name: 'Series 1',
            data: dataX,
            yAxis: 0},
        {
            name: 'Series 2',
            data: dataY,
            yAxis: 1}],
        yAxis: [{
                floor: 0,
                ceiling: 100,
                title: {
                    text: '1'
                },
            },
            {
                floor: 0,
                ceiling: null,
                title: {
                    text: '2'
                },

                opposite: true}]});});

http://jsfiddle.net/2bzew/2/

Can anyone explain why this is happening?

Answer 1

You can always create your own tickPositioner, or set directly tickPositions: http://jsfiddle.net/2bzew/4/

See docs and more examples:

• tickPositioner
• tickPositions

Answer 2

I had a similar problem, but I found that using the following solves the issue:

        maxPadding: 0,
        minPadding: 0,

The default for these values are both 0.05 so that will be added to your data and cause highstock to make the y axis bigger than intended. Zeroing them out seems to fix the problem for me.

I also recommend to set the following so that maximum value still has a label:

        showLastLabel: true,

http://jsfiddle.net/M4bVz/

Answer 3

From Highcharts API:

When using multiple axis, the ticks of two or more opposite axes will automatically be aligned by adding ticks to the axis or axes with the least ticks. This can be prevented by setting alignTicks to false. If the grid lines look messy, it's a good idea to hide them for the secondary axis by setting gridLineWidth to 0. Defaults to true.

I have updated your fiddle with these corrections.

chart: {
        alignTicks: false
    },
...
yAxis: [{
            ...
            gridLineWidth: 0,
            ...

http://jsfiddle.net/2bzew/3/