Chart.js: Intersect False and PointHoverRadius

[frlinw]

Hi,

First of all, thanks for your great work on tooltips in 2.4 !

Now, for visual improvment, is it possible to trigger the hover event when a tooltip is shown on a point even if the cursor doesn't hover the point (intersect: false)?

Thanks!

[etimberg]

@frlinw do you mean the hover styling that makes the radius change?

[etimberg]

If I understood correctly, you're asking if the intersect setting can apply to the hover styling. The answer is yes.

See: https://jsfiddle.net/pof4qvek/

[frlinw]

Yes, it was what i wanted, thanks!

Bug report (this post won't be completly useless so) :
If many datasets have the same value on a point, tooltips blink
https://jsfiddle.net/pof4qvek/1/

[etimberg]

The flickering is from how the nearest item is found https://github.com/chartjs/Chart.js/blob/master/src/core/core.interaction.js#L56

Right now if two items are at the same distance to the mouse position, we find the smallest else we just pick the first one https://github.com/chartjs/Chart.js/blob/master/src/core/core.interaction.js#L213-L225

Maybe we need to find a better rule for that

[frlinw]

I understand. Is there a reason to pick the smallest rather than the highest or whatever ? if not, you can just pick the first dataset, it will be consistent.

Edit:
If you pay attention, hover and tooltips are processed separately so you always got the pointHoverRadius from one dataset and the tooltip of the other dataset.
https://jsfiddle.net/pof4qvek/2/
problem is that .sort() is unstable with equals elements, maybe there is a way to fix this

[etimberg]

We chose smallest because it gives the best behaviour if the points have different radii. If we choose the larger one, it would become impossible to get the smaller point.

Yup, the sort is the problem. Just throwing out solutions here:

1. we could try not sorting if all points have the same size
2. add another dimension to sort by if the sizes are the same (maybe by dataset index?)

[etimberg]

I looked into this. The problem is that we sort by area first, then dataset index. What happens is that the hover increases the size, which then prioritizes the other point so we see them keep swapping. Not sure what the best solution to this is. Any ideas?

[frlinw]

1) In term of user experience, the best thing to do is to change the tooltip mode if there is more than one dataset on a specific value

But there are probably some caveats if the dev set custom callbacks for tooltips and maybe the architecture of tooltip don't allow this kind of specific process..

2) Wait for the hovering to process tooltips display
3) Predict which data point will be the hovered one and generate the related tooltip.

I don't know the core of chartjs maybe I will start to dive into it...