How to set the minimum upper limit for an axis in Highcharts?

Question

I am trying to set a minimum upper bound, in particular:

• Y axis should start at 0
• Y axis must go at least 10 or higher (automatically scaled)
• The upper limit of the y axis should never be less than 10.

It looks like Highcharts does, but I can't figure out how to do it. Does anyone have any experience with this?

Answer 1

Highcharts seems to have no way to do this while creating the chart. However, they expose several methods for polling extremes and changing extremes, getExtremes() and setExtremes(Number min, Number max, [Boolean redraw], [Mixed animation]) found in their documentation .

So, a possible solution (after creating the chart):

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

yAxis[0] refers to the first y axis, and I assume that in this case you have only one axis. doc explains how to access other axes.

This is not ideal because the chart should be redrawn, which is not too noticeable, but it is still there. I hope Highcharts can get this functionality built into the options.

Answer 2

The way to do this is only with options (no events or functions):

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

Here minRange defines the minimum axis spacing. maxPadding is 0.01 by default, which will make the axis longer than 10, so set it to 0 instead.

This gives the same results as a setExtreme . See this JSFiddle demo .

Answer 3

Adding a very good answer to Julian D , the following avoids the potential problem of repositioning if your calculated max changes in the number of digits to the desired upper bound.

In my case, I had percentage data that is currently included in 20, but I need a range from 0 to at least 100, with the ability to jump to 100 if necessary, so the following settings are min and max in the code, then if dataMax is higher, reassigns max to its value. This means that the positioning of the graph is always calculated with sufficient space for three-digit values, and not for two-digit numbers, and then it is split into “100” compression, but allows up to “999” before the problem occurs.

 var chart = new Highcharts.Chart({ chart: { renderTo: 'container', events: { load: function(event) { thisSetMax = this.yAxis[0].getExtremes().max; thisDataMax = this.yAxis[0].getExtremes().dataMax; if (thisDataMax > thisSetMax) { this.yAxis[0].setExtremes(0, thisDataMax); alert('Resizing Max from ' + thisSetMax + ' to ' + thisDataMax); } } } }, title: { text: 'My Graph' }, xAxis: { categories: ['Jan 2013', 'Feb 2013', 'Mar 2013', 'Apr 2013', 'May 2013', 'Jun 2013'] }, yAxis: { min: 0, max: 100, title: { text: '% Due Tasks Done' } } //Etc... }); 

Answer 4

HigtCharts has really good documentation of all the methods with examples.

http://www.highcharts.com/ref/#yAxis--min

In your case, I think you should have the "min" and "max" properties of the "yAxis".

min: number Minimum axis value. If null, the min value is automatically calculated. If the startOnTick parameter is true, the minimum value may be rounded. The default value is null.

max: Number The maximum value of the axis. If null, the maximum value is calculated automatically. If the endOnTick option is true, the maximum value can be rounded. The actual maximum value is also affected by chart.alignTicks. The default value is null.

If you are creating a chart dynamically, you must set

= 0 min max = 10 if all your data values ​​are less than 10

and

only min = 0 if you have a value greater than 10

Good luck.

Answer 5

Try setting the minimum axis value and label spacing in axis units as follows:

 var chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, yAxis: { min: 0, max: 10, tickInterval: 10 } }); 

Also do not forget to set the maximum value.

Hope this helps.