Tooltip Temporarily Combines data with mode:"x" and intersect:false

[mclean25]

Expected Behavior

Tooltip should show the current axis intersect data correctly without what I can only describe as "render glitches".

Current Behavior

When moving your mouse over the x-axis, you can see that the tooltip will "flutter" at some points, showing data as if there's 3 or 4 datasets instead of just 2. They only last for a short duration, and then fade away on the next render loop.

Possible Solution

Seems like something to do with how the intersect is being fetched is returning the wrong (or combined) result for some reason. Also note that there seems to be a related bug when you turn animations on in options.hover (I turned them off). The issue seems to get much, much worse.

Steps to Reproduce

https://jsfiddle.net/mclean25/0hdzsftk/15/

Context

It would be a very big UX improvement if the tooltip were to render nicely instead of looking like something breaks temporarily.

Environment

• Chart.js version: 2.9.4
• Browser name and version: Version 87.0.4280.141 (Official Build) (x86_64)

[mclean25]

Here's an example of what it looks like when the data get's stacked. The 15k & 15.39k values should be there, but the other two are added for some reason. The other two values seem to come from 2021-02-24 (instead of the desired date here of 2021-02-08.

[LeeLenaleee]

You can set the mode to index to get the result you want for the time being.

[kurkle]

Reproduces in master:

[mclean25]

As @LeeLenaleee stated, setting the mode to index instead of x solved my issue.

[LeeLenaleee]

Guess the issue should still be open since it is still definitly a bugg because it should only show the items intersecting on that X value and now it shows more items

[etimberg]

I'm guessing that this is due to the points being very close together and multiple points returning positive hit-tests.

[kurkle]

Also fixed by setting pointHitRadius: 0:
https://jsfiddle.net/ae5vrcfL/

I'm closing as this is working as expected, the points should return positive hit-test with those parameters.

[JEK58]

With beta V3-beta-13 it does not a show any tooltip with pointHitRadius: 0.
Any idea how to make it work again?

Setting the mode to index instead of x doesn't work for me as the datasets do not start at the same time. (X axis is time based)

[kurkle]

intersect: false? if that does not work, we'd need a fiddle to take a look.

[JEK58]

intersect was set to false, yes. I set up a fiddle: https://jsfiddle.net/JEK58/at4w6j5z/

[JEK58]

Any idea? I'm still having this issue with the latest release (3.2.0)

[kurkle]

@JEK58 are you looking for something like that: https://jsfiddle.net/svt7g0rn/ ?

[JEK58]

@kurkle almost. I would like to see the altitude of both pilots at the same time.

[kurkle]

@JEK58 your point skipping skipped different points so there were not many at the same timestamps.

Without the skipping (and some other tuning): https://jsfiddle.net/svt7g0rn/5/

[silvester-pari]

@kurkle unfortunately, even with pointHitRadius: 0, this still happens with chartjs ^3.6.2 if the points are close enough to each other. Hovering highlights at least points from two dates which is quite annoying.

With pointHitRadius: 1:

With pointHitRadius: 0:

Isn't there any way to only hover at "exact" x value? Mode index doesn't seem to have this issue, but only works if both datasets have the same amount of points (which does not happen with time axes).

[kurkle]

#9974 (or #9961) would solve the issue.