2

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?

Shannon Wrege
  • 149
  • 2
  • 12

2 Answers2

3

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).

Shannon Wrege
  • 149
  • 2
  • 12
0

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

Core972
  • 4,065
  • 3
  • 31
  • 45
  • I don't think that fixes the problem. Setting the max in the 3rd chart to 100 gives a smaller range capped at 100, but it also crops the data. Setting the max in the 3rd chart to 110 yields the exact same result as setting it to 101. The y-axis max value is 150 in both cases. The effect of your fiddle is basically the same as what I had already done in chart #2 of my fiddle. – Shannon Wrege Jan 26 '18 at 18:35
  • You can verify this by changing line 23 of the javascript in your fiddle to [1514851200000,106] – Shannon Wrege Jan 26 '18 at 18:41
  • @ShannonWrege, I update my answer to add `tickPixelInterval` you will have to find the best value according to your data. – Core972 Jan 26 '18 at 19:05
  • Great suggestion! That made the charts look a lot better. This actually got me digging through the highcharts API docs, and I found what I think is an even better solution for my problem: `endOnTick` – Shannon Wrege Jan 26 '18 at 19:58