Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I set a minimum upper bound for an axis in Highcharts?

I'm trying to set a minimum upper bound, specifically:

  • The Y axis should start at 0
  • The Y axis should go to at least 10, or higher (automatically scale)
  • The upper bound for the Y axis should never be less than 10.

Seems like something Highcharts does, but I can't seem to figure out how. Anybody have experience with this?

like image 375
Andrew Dunkman Avatar asked Feb 08 '12 22:02

Andrew Dunkman


2 Answers

Highcharts doesn't seem to have an option for doing this at chart creation time. However, they do expose a couple methods to interrogate the extremes and change the extremes, getExtremes() and setExtremes(Number min, Number max, [Boolean redraw], [Mixed animation]) found in their documentation.

So, a possible solution (after chart creation):

if (chart.yAxis[0].getExtremes().dataMax < 10) {
   chart.yAxis[0].setExtremes(0, 10);
}

yAxis[0] references the first y-axis, and I'm assuming that you only have one axis in this case. The doc explains how to access other axes.

This isn't ideal, because the chart has to redraw which isn't too noticeable, but it's still there. Hopefully, Highcharts could get this sort of functionality built in to the options.

like image 135
smerchek Avatar answered Nov 17 '22 10:11

smerchek


A way to do this only using options (no events or functions) is:

yAxis: {
    min: 0,
    minRange: 10,
    maxPadding: 0
}

Here minRange defines the minimum span of the axis. maxPadding defaults to 0.01 which would make the axis longer than 10, so we set it to zero instead.

This yields the same results as a setExtreme would give. See this JSFiddle demonstration.

like image 28
Halvor Holsten Strand Avatar answered Nov 17 '22 11:11

Halvor Holsten Strand