x-axis tickInterval not working correctly in highstock chart

Question

I'm displaying a number of series in a highstock chart. I chose highstock because I want to show at least 4 hours of data with the option of scrolling if the user adds data points beyond those 4 hours (but I don't want the rangeSelector or navigator enabled, if that pertains to the problem I'm having).

I thought this would be straightforward, but I'm having problems showing 15-minute intervals on the x-axis. When one data point is dynamically added, the graph correctly shows the 15-minute tick intervals, but when more data points are added, the x-axis starts to scale the times incorrectly. If I then refresh the page and display a graph with multiple data points, I get really weird tickIntervals.

Here are my xAxis options:

xAxis: {
        type: 'datetime',
        min: 1361815200000,
        max: 1361829780000,
        tickInterval: 15 * 60 * 1000,
        minTickInterval: 15 * 60 * 1000, // 15 minute intervals
        gridLineWidth: 2,
        labels: {
            formatter: function () {
                var d = new Date(this.value);
                return (d.getMinutes() == 0) ? '<b>' + Highcharts.dateFormat('%H:%M', this.value) + '</b>' : d.getMinutes();
            }
        }
    }

You can see the rest here: http://jsfiddle.net/pxCsX/

What am I missing? I've tinkered with minRange, type and other xAxis and series attributes and scoured the highstock docs, but I keep coming up with bupkis.

Answer 1

Setting ordinal to false solves the problem:

xAxis: {
    ordinal: false
}