Highcharts Y-Axis Limits

1
votes

I am having problems controlling the Y-Axis range of a highcharts graph. It seems like highcharts likes nice round numbers. When my data passes or is close to certain thresholds, the Y-Axis range can expand a lot which effectively compresses all the plot points downward.

Here is a jsfiddle that illustrates the problem I am having: https://jsfiddle.net/shannonwrege/z8h5eork

The relevant code for this post is this:

chart.yAxis[0].setExtremes(0, max, true, false);

Keep in mind that I don't know what the data will look like in advance, so I must dynamically modify the Y-Axis range. Right now I am using the setExtremes because of other suggestions I've read on stackoverflow.

The maximum y-value of the data in the first two charts is 99. You'll notice that the y-axis is set at 150 in the first chart where the range is automatically calculated and 100 in the second chart where I specifically set the extreme values. The look of the 2nd chart is what I want. So it seems like setExtremes(0,99,true,false) should do the trick, but it actually doesn't.

In the 3rd chart I changed the data so that the maximum y-value of the data is 101, and I called setExtremes(0,101,true,false). You'll note that the y-axis is now back to 150.

Ideally I want the scale of the graph to be capped on the maximum value to limit the about of extra white space. I want to see all of the data, but I don't necessarily care about the y-axis displaying a maximum band that is greater than the max data value. In this case, I would be happy with the y-axis displaying 100 on the axis and some points over but still visible.

Does anyone know how to make this work?

2
javascripthighcharts

2 Answers

2
votes

I ended up using the endOnTick parameter to solve this problem. Adding the following line to the yAxis configuration parameters did exactly what I wanted:

endOnTick: false,

Here's the updated Fiddle showing the results.

https://jsfiddle.net/shannonwrege/z8h5eork/3/

All of the charts look pretty good in my opinion (even the one where the yAxis range was auto calculated).

0
votes

You will need to read the data and then round up to set the idealMax

var chart,
    idealMax = 0; // init the max value

// Read the data to find the highest value
for (i=0;i < (options.series[0].data).length; i++ ){
    if (options.series[0].data[i][1] > idealMax) {
        idealMax = options.series[0].data[i][1];
    }
}

// Round the max to the nearest 10
idealMax = Math.round(idealMax / 10) * 10;

options.yAxis.tickPixelInterval = idealMax/10;

Highcharts.chart('container1', options);

chart = $('#container1').highcharts();
chart.yAxis[0].setExtremes(0, idealMax, true, false);

Updated Fiddle