Highcharts: Shared tooltip is not showing all datapoints

[Izothep]

The problem appears when we are having different number of data points.

Here is live example:

and the code for it:
http://jsfiddle.net/548k8q1p/

[KacperMadej]

Highest version of Highcharts without the problem is 4.1.5 : http://jsfiddle.net/548k8q1p/1/

[pawelfus]

Both cases on the bugfix branch:

• http://jsfiddle.net/jjvrv410/5/
• http://jsfiddle.net/548k8q1p/2/

Sorry for the extra changes in the commit, I have a habit of using git commit -am ....

[TorsteinHonsi]

Reopened with 0ca4f6aadc222b

[pawelfus]

_Internal note:_

Ok, maybe I'm missing some great solution (minimalistic example here: http://jsfiddle.net/548k8q1p/3/):

• when using shared tooltip, we look for closest point in terms of x position. That means, when moving mouse from point=50 to point=100, we catch the case, when in kdpoints array, we have two points for different x (because Series 1 doesn't have any points for x=2, which in that terms is correct)
• from kdpoints array, we choose point which is the closest one to the current mouse position by comparing distance from mouse (radius, not like in the previous step x position) here
• at that moment, the closest point is from Series 1, so we remove from kdpoints array non-matching points here
• displayed is only one, closest point, in the tooltip

That results in the bug above. Now, instead of splicing, we can go look for points with the same x-coordinate, but I'm not sure how will that hit tooltip's performance. @TorsteinHonsi - any suggestions appreciated - maybe there is better solution for that case?

[TorsteinHonsi]

I think in the second point we are not supposed to look for the absolute nearest point, but all points that share the same X position. So distX should determine.

[pawelfus]

Wouldn't be that the same as in my previous commit? When we use distX to compare, there will be a problem with events on points - always first point will be "active" point, which gathers all events (which is the reason we reverted changes).

[TorsteinHonsi]

Then we need to find another way that doesn't break the other changes...​

[pawelfus]

Connected issues:

• #3919
• #4865
• #4893
• #4896

[pawelfus]

As in the commit - I suggest to store both, absolute closest point and closest point in x terms. For events use absolute closest point, and for shared searches use closest point in x dimension.

[TorsteinHonsi]

Thanks! I worked on it and used a slightly more functional approach, to make it more readable. It uses sorting and grepping to locate closest points for either X or XY. Do you see any problems with this?

[pawelfus]

That's clever!
I see one problem with that solution: http://jsfiddle.net/d724xgdy/9/ - hover points on x=3, then hover points on x=2 (bugfix branch: http://jsfiddle.net/d724xgdy/10/):

[TorsteinHonsi]

Yup, you're right. I'm reverting to your fix.

Now something happens to the crosshair. See http://jsfiddle.net/highcharts/d724xgdy/11/, and hover the 0 and 1 categories. Can you have a look at it?

[TorsteinHonsi]

PS: You need to merge the latest master into bugfix.

[pawelfus]

Thanks! Merged, checking this.

[pawelfus]

This is caused by showing crosshairs on all points here., but filtering is done only when kdpoint changed here. Commit above simply moves filtering earlier, so kdpoints array will already have only correct points.

[TorsteinHonsi]

You fix?

[pawelfus]

Yes, see commit above: ee80655

[TorsteinHonsi]

Thanks!

[jontore]

Hi, I have a simple plot where the data is added async. Since shared defaults to true, the if condition throws. There is no kdpoint[1] so it can not compare clientX.

[TorsteinHonsi]

Hi, can you demonstrate that in jsFiddle?

[jontore]

Hei, @TorsteinHonsi

Actually I can not so it might be the async behaviour is our app, but this is the basic setup.

http://jsfiddle.net/uyn9g934/

I fixed it by setting shared to be false for the tooltips in our application.

[TorsteinHonsi]

Ok, let us know if you are able to reproduce it, and we'll have a look!

[danield137]

@TorsteinHonsi
Im having the issue @jontore described, here is a fiddle.. pretty basic setup.
http://jsfiddle.net/jnwq9fz8/

[pawelfus]

@danield-hyprbrands - it should be fixed in the bugfix branch, please take a look: http://jsfiddle.net/jnwq9fz8/1/ (related ticket: #5354)

[danield137]

@pawelfus yes this does seem to fix the problem. is there a release date?

[pawelfus]

Commit is not in the master branch yet, so it's hard to say which release will include it. The next release date is not specified yet, but I think it will be late August.

[richfinelli]

Hi @pawelfus and @TorsteinHonsi,
I'm using a column chart with the shared tooltip. My problem is not exactly as this bug describes. I'm always seeing 1 datapoint the first time the tooltip appears. After the first time, all other subsequent times ALL datapoints appear in the tooltip. Version 5.0.8.

Any thoughts?

[pawelfus]

Hi @richfinelli

Could you recreate issue in jsFiddle? We will take a look.

[richfinelli]

hi @pawelfus - i was only able to get it to occur inside of my codebase/stack. When taking it into a standalone simplified demo it was working fine. Was throwing a hail may pass hoping you might have seen this before and have some advice. I'll do some more investigation on my end and will let you know if I can replicate in a jsFiddle.

[pawelfus]

I would try to update Highcharts to 5.0.14 version, maybe it is a bug in the old version?

[richfinelli]

@pawelfus - I was able to confirm that the problem exists in Highcharts 5.0.8 thru 5.0.11 in a simplified example. It works in 5.0.12 and up. So this problem was not related to my codebase/stack like I had previously thought, more so related to the version. Thanks!

[richfinelli]

@pawelfus - Here's the fiddle that contains the problem. On 1st hover only 1 data point shows in the tooltip. subsequent hovers show all data points. https://jsfiddle.net/richfinelli/b617ywaq/21/ If I upgrade to more recent versions its fixed, but at my company it will be difficult to upgrade highcharts and regression test, etc. I'm wondering if you can point me in the direction of a workaround or patch I can apply to fix this. Thanks in advance!

[pawelfus]

It's directly fixed in #6687 ticket, commit: 5c3ab4f

I don't see any easy workarounds, maybe just disabling shared tooltip and manually looking for all corresponding points in the series[index].points ? It would work fine you have have reasonable amount of points (e.g. less than 100k of points). Something like this (if you have the same number of points in each series):

formatter: function () { 
  var series = this.point.series.chart.series,
        index = this.point.series.points.indexOf(this.point),
        str = '';

  for (var i = 0; i < series.length - 1; i++) {
    str += 'Series: ' + series[i].name + ' : ' + series[i].points[index].y;
  }
  return str;
}

[richfinelli]

Turning off shared tooltip and using that formatter function you provided worked like a charm! Thank you so much @pawelfus! You rock!