Highcharts, how can I start xAxis on an arbitrary time - highcharts

Question

I have a line chart with a datetime xAxis. I need to show ticks every 10 minutes, for that I have set tickInterval to 10*60*1000, my problem is that I need to show ticks every 10 minutes since the first date, for example, if my first point is displayed at 10:33, I need to show ticks at 10:33, 10:43, 10:53, etc, but what I have are ticks at 10:30, 10:40, 10:50 and so on, is there any way to do this?
Thanks!

Answer 1

It's not that straightforward because Highcharts automatically determines the labels to use when the x-axis is of the type 'datetime':
"In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days"
To set labels like '10:33' you need to create your own categories. Luckily these can simply be derived from your data and the desired time interval.
Here's a working example: http://jsfiddle.net/Rt7ZV/
We just take the given start date, interval and number of points and build an array of the categories to be used as the x-axis labels.
function getTimes(numTimes, interval) {
var ms = (new Date(2012, 02, 30, 10, 33)).getTime();
var times = [];
var startDate = new Date(ms);
times.push(startDate.getHours() + ":" + startDate.getMinutes());
for (var i = 1; i< numTimes; i++)
{
ms += interval;
var nextTime = (new Date()).setTime(ms);
var nextDate = new Date(nextTime);
times.push(nextDate.getHours() + ":" + pad(nextDate.getMinutes(), 2));
}
return times;
}
function pad(num, size) {
var s = num+"";
while (s.length < size) s = "0" + s;
return s;
}
var data = [1, 2, 3, 4, 5, 3, 2, 5, 7, 6, 4];
var interval = 10*60*1000
var timeCategories = getTimes(data.length, interval);
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
spacingRight: 20
},
title: {
text: 'Time series'
},
xAxis: {
categories: timeCategories,
title: {
text: null
},
startOnTick: false
},
yAxis: {
title: {
text: 'Exchange rate'
},
startOnTick: false,
showFirstLabel: true
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
series: [{
type: 'line',
name: 'time series',
data: [
1, 2, 3, 4, 5, 3, 2, 5, 7, 6, 4
]
}]
});
});
});

Answer 2

I found the tickPositions property on xAxis, which isn't documented on highcharts, only on highstock, but seems to work fine on both. With this property you can specify which values you want to hace a tick for, and work perfectly for my problem.