tickInterval doesn't work properly in Highchar

Question

I am trying to use Highstock/Highchart to show some data. In my data, the interval between each record is 1 millisecond, I want to set length between each tick to 40 milliseconds, I tried it by setting tickInterval to 40, but on the graph it shows 50 between each tick. If I set it to 30, the graph shows 25. Very weird, I don't know what to do now, please help.

The link: http://jsfiddle.net/xEcNS/1/

Thanks you

Answer 1

Highstock does not set the exact value which you provide as tickInterval.

By Default, What it does that It loop through the units to find the one that best fits the tickInterval.

[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples for Milliseconds

[1, 2, 5, 10, 15, 30] // Seconds

[1, 2, 5, 10, 15, 30] // Minutes

[1, 2, 3, 4, 6, 8, 12] // Hours

[1, 2] // Day

[1, 2] // Week

[1, 2, 3, 4, 6] //Month

So, the input would be set by searching nearest best match.

Answer 2

I went through the highstock source code and found this piece of code

function normalizeTimeTickInterval(tickInterval, unitsOption) {
 var units = unitsOption || [[
 MILLISECOND, // unit name
 [1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples 
 ...
}

What is this code? It says if the units of your time is milliseconds, then normalize the tickInterval (40, in your case) to a multiple of one of these, hence it normalizes 40 to 50 and 30 to 25. I don't see if this can be overridden from options. You do have an option of changing the code though, if that is acceptable to you and do not violate any copyright laws.

EDIT: Found a hack to get this working without changing source code check fiddle @ http://jsfiddle.net/jugal/H83bs/

Here is what I did. A little debugging/analysis of source code gave the hint that highchart first tries to find the units thing in the axis's options's units property, if it doesn't find it, it uses the default one. So I went ahead and tweaked the units property to set it as follows. You will need to do this before calling the highcharts constructor.

Highcharts.Axis.prototype.defaultOptions.units=[[
            'millisecond',
            [1, 2, 5, 10, 20, 25,30,40, 50, 100, 200, 500]
        ], [
            'second',
            [1, 2, 5, 10, 15, 30]
        ], [
            'minute',
            [1, 2, 5, 10, 15, 30]
        ], [
            'hour',
            [1, 2, 3, 4, 6, 8, 12]
        ], [
            'day',
            [1]
        ], [
            'week',
            [1]
        ], [
            'month',
            [1, 3, 6]
        ], [
            'year',
            null
        ]];