Highcharts Y axis bounds ignore floor/ceiling

Question

I am trying to create a fairly basic chart that shows some time series data. The data will sometimes be all positive and will occasionally have negative values. I know the extremes for the data, so I am setting a ceiling and a floor on the y axis, so that the range will stay narrow enough to maximize the resolution of the data.

However, as soon as I have some data with a wide range (say -20 to 1000), the floor and ceiling values go right out the window and the chart blows the negative bound of the y axis out to a huge number that eliminates most of the resolution for my data. I've tried every combination of the min/max/minRange/minPadding/softThreshold/floor/ceiling/etc that I can come up with and I cannot for the life of me get the minimum bound for the y axis to stick at -50 when there are negative values.

JSFiddle here: https://jsfiddle.net/hx6gnw3j/2/

Highcharts.chart('container', {
    yAxis: {
      floor: -50,
      ceiling: 1000,
      opposite: true,
    },
    series: [{ 
        //data: [-8.9, 10.5, 15.4, 12.2, 14.0, 17.0, 13.6, 7.5, 2.4, 9.1, 9.6, 5.4],
        //data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 999.6, 54.4],
        data: [-15.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 800.6, 54.4],
    }]
});

With the first two commented out data sets everything works fine. When there's a negative value but a narrow range, the y axis shows all the data with a tight range. When there's no negative data, the minimum bound for the y axis is 0 and the max is 1000. But as soon as there's a negative value and a large positive value (third data set), I end up with y axis bounds of -500 and 1000. That is definitely not what I want.

Hoping someone out there has the secret sauce for getting that low bound to stay constrained.

Thanks!

Sebastian Wędzel Sebastian Wędzel · Accepted Answer · 2020-05-06T09:52:46

The problem which you are struggling to is related to keeping the calculated tickInterval constance for this type of data.

Look how to chart with this particular data looks like with forced min as -50: https://jsfiddle.net/BlackLabel/26fujcL7/. Using the yAxis.tickPositions feature breaks the logic responsible for setting the tickIntervals.

yAxis: {
  tickPositions: [-50, 0, 250, 500, 750, 1000]
},

API: https://api.highcharts.com/highcharts/yAxis.tickPositions

I am not sure if it is an output which will satisfy you. Alternatively, you can use the tickPositioner callback to calculate tickPositions for your needs or increase the tickAmount.

API: https://api.highcharts.com/highcharts/yAxis.tickPositioner

API: https://api.highcharts.com/highcharts/yAxis.tickAmount

Highcharts Y axis bounds ignore floor/ceiling

2 Answers