How to get index of a point in Highcharts?

Question

I'm using "Time data with irregular intervals" chart of Highcharts. As you know when mouse moves over points of line the formatter function runs and shows some information. I want to know index of the point that mouse moves over it. So if mouse moves over first point of the line, tooltip shows "1" and the second point shows "2" and so on. thnx.

Answer 1

This worked for me using v2.2:

this.series.data.indexOf( this.point )

Answer 2

One way is to pre-process the data to contain a property with the index. In the Snow-depth example you could do a preparation like this:

function prepare(dataArray) {
    return dataArray.map(function (item, index) {
        return {x: item[0], y: item[1], myIndex: index};
    });
};

to convert the array of [x, y] to be an object like { x: x, y: y, myIndex: i}. Then its easy to pick up that index in the formatter with:

formatter: function() {
     return 'point ' + this.point.myIndex;
}

Example on jsfiddle

Answer 3

For the record your can do it directly in a nice way

It is store in:

this.points[0].point.x

Answer 4

Since the data is sorted you can use a binary search.

A binary search should perform well even for large number of points (from the wikipedia article: "For example, to search a list of one million items takes as many as one million iterations with linear search, but never more than twenty iterations with binary search."

Example:

var bsComparator = function(a, b) {
    if (a.x < b.x) { return -1; }
    if (a.x > b.x) { return 1; }
    return 0;
};
var binarySearch = function(series_data, point) {
    var low = 0, high = series_data.length - 1,
        i, comparison;
    while (low <= high) {
        i = Math.floor((low + high) / 2);
        comparison = bsComparator(series_data[i], point);
        if (comparison < 0) { low = i + 1; continue; }
        if (comparison > 0) { high = i - 1; continue; }
        return i;
    }
    return null;
};


tooltip: {
    formatter: function() {
        var pointIndex = binarySearch(this.series.data, this.point);
        return "Point index: " + pointIndex;
    }
}

(the binarySearch function above is inspired by http://www.dweebd.com/javascript/binary-search-an-array-in-javascript/)

Answer 5

Sounds like you only need the xAxis value (i.e. time). Use: this.xData.indexOf(point.x)

this.points will be grouped in larger series so would need a deeper search through points[0]...points[n].

Answer 6

This is all that worked for me on Highstock JS v4.2.4:

var index = this.points[0].point.dataGroup.start;

Answer 7

This is about as hacky as it comes, and will get slow as hell with alot of points, but it'll work. The general idea is to look through all the points in the series' data until you find the one matching the current point:

tooltip: {
     formatter: function() {
         for(var i=0;i<this.series.data.length;i++){
              var item = this.series.data[i];
              if(item.x == this.x && item.y == this.y)
               return 'point ' + i;
         }
         return 'not found'
     }
  }

Live example: http://jsfiddle.net/Fuv4h/

Answer 8

If you have access to your point then you can simple access, this.point.index or simply this.index if this refers to the point it self to get access to its index,

In my case I always use this because its simpler then @Edgar solution, which is also great.