Posts: 1465
Joined: Tue Sep 21, 2010 2:33 pm

yAxis - min, tickInterval, startOnTick...

Hello :)

I am having an issue with a very particular requirement with my yAxis.

I have adapted the 'min' example from the options reference to illustrate the problem:

- The min is -50.
- The tick interval is 40.
- Start on tick is true.

I want the minimum value to be -50. And I want the chart to start at -50. And the tickinterval should then calculate from there in increments of 40.

Is there a way to stop the tickInterval from overriding the min?
fiddles: http://jsfiddle.net/jlbriggs/J9JLr/
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: yAxis - min, tickInterval, startOnTick...

If you just want to set min to -50, you just have to set startOnTick: false. But if you want ticks from -50 growing at 40 (-50, -10, 30, 70, etc.) you have to hack the source code.
Slawek Kolodziej
Highcharts support team
Posts: 1465
Joined: Tue Sep 21, 2010 2:33 pm

Re: yAxis - min, tickInterval, startOnTick...

Ok, I was afraid of that.
Sounds like a good opportunity for a new option setting: 'startOnMin' :)

thanks, as always, for the quick response.

Would you be able to point me to the right part of the source code?
I thought I could work around this a different way (using yAxis categories) but things didn't go as expected!
fiddles: http://jsfiddle.net/jlbriggs/J9JLr/
Posts: 1
Joined: Thu Nov 03, 2011 4:38 pm

Re: yAxis - min, tickInterval, startOnTick...

I was able to get around this limitation by setting the tickinterval so that each of the labels I wanted would be displayed and then using the formatter option, I stripped out any unwanted labels. It's a bit hacky, but I think it's better than hacking the source code, and until a solution is provided within Highcharts, this may be one of the only ways to accomplish this.

My specific problem was: I had an xAxis that needed to show the years 1990, 2015 and 2040 and my data sat between 1990 and 2040. So I set the xAxis options to the following:

Code: Select all

xAxis: {
	tickInterval: 5,
	labels: {
		formatter: function() {
			var val = this.value,
			desiredLabels = [1990, 2015, 2040];
			if ($.inArray(val, desiredLabels) !== -1) {
				return val;
			return '';
By setting the interval to 5, the 1990, 2015 and 2040 labels appeared in the xAxis. I then used the formatter to change the text of any label that I didn't want to show up to an empty string.

I'm sure this logic could be expanded upon to make a more dynamic solution. I hope this is helpful to anybody who runs into this problem in the future.

Return to “Highcharts Usage”