CODEWITHSUNDEEP
javascripthighcharts
James Donnelly
James Donnelly

Reputation: 128771

How can I capture all points belonging to the same series with the same xAxis value without a loop?

I don't know if this is a bug with Highcharts, but I'm plotting two values within the same series on the same xAxis on a chart and I'd like to be able to capture all points within the same xAxis in a tooltip. Unfortunately Highcharts is under the impression that only one of the points exists:

Example

In fact, if you hover over the far left point and move your cursor over the central point with the value 1, the point for value 2 will be highlighted and that is the point Highcharts believes I'm hovering over.

I could use a loop to determine which points also exist, but where I'm using a shared tooltip and my production chart can have hundreds of points plotted across a lot of different series, I think this would be a very resource-intensive approach.

Here is a JSFiddle demo which generates the above chart using the below series data:

series: [{
    data: [
        { x: 0, y: 1 }, { x: 1, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 2 }
    ]
}]

I've also defined the following tooltip properties:

tooltip: {
    shared: true,
    formatter: function() {
        return "Points: " + this.points.length + "<br>Value: " + this.y;
    }
}

If we debug this.points when hovering over the central line, we'll see that all it contains is:

[Object] 0: Object
    key: 1,
    percentage: undefined,
    point: Ga,
    series: c,
    total: undefined,
    x: 1,
    y: 2

There's no mention of the { x: 1, y: 1 } point at all.

How can I also capture and display this data in my tooltip alongside the { x: 1, y: 2 } point without having to loop through every point in every series to find similar points in the tooltip formatter function?

Update

Another good example of the problem surrounding this is when enabling allowPointSelect: you simply cannot click the { x: 1, y: 1 } point - when you do, the { x: 1, y: 2 } point is selected instead. JSFiddle demo.

Example 2

Upvotes: 1

Views: 247

Answers (1)

JamesT
JamesT

Reputation: 3028

Part 1: Selecting the closest point

With a line chart, Highcharts calculates the nearest point based purely on horizontal distance the point and your mouse.

This means that once it's built it's point tree, given two points with the same x, it'll always return the first one it hits.

You can override this to use the actual distance to the point like so:

series.kdComparer = 'distR';

It should then give you the genuine closest point.

Update: Selecting Other Points

To get other points with the same x value on the same series, you can take advantage of Highcharts k-d point tree. Searching through this is much faster than searching through the series points.

Here's an updated fiddle which does this. Note this still works even if the matching points are not declared in sequence. It also lets you find points that have exactly the same coordinates.

http://jsfiddle.net/h11xfs5L/18/

Upvotes: 1

Related Questions