Tuesday, January 24, 2012

Highcharts: Controlling and mastering axis interval properties


Interval properties for xAxis and yAxis:

tickPixelInterval
tickInterval
tickInterval
startOnTick
endOnTick

Example "fixed number of intervals":
tickInterval : xAxis_tickInterval
startOnTick : xAxis_min
endOnTick : xAxis_max

The secret to get the exact number of intervals desired is to have xAxis_min and xAxis_max multiples of xAxis_tickInterval.
To do this, assuming you want 10 intervals, the extra fix should look like:

var xAxis_min = value_min;
var xAxis_max = value_max;
var xAxis_tickInterval = Math.round((xAxis_max - xAxis_min) / 10);
while(xAxis_min % xAxis_tickInterval != 0) {
xAxis_min--;
}
while(xAxis_max % xAxis_tickInterval != 0) {
xAxis_max++;
}

And the xAxis properties:
xAxis: {
showLastLabel: true,
min : xAxis_min,
max : xAxis_max,
tickInterval : xAxis_tickInterval,
startOnTick : xAxis_min,
endOnTick : xAxis_max
}

No comments: