Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Intersect False and PointHoverRadius #3615

Closed
madmoizo opened this issue Nov 17, 2016 · 8 comments
Closed

Intersect False and PointHoverRadius #3615

madmoizo opened this issue Nov 17, 2016 · 8 comments
Milestone

Comments

@madmoizo
Copy link

madmoizo commented Nov 17, 2016

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
Copy link
Member

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

@etimberg
Copy link
Member

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/

@madmoizo
Copy link
Author

madmoizo commented Nov 18, 2016

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
Copy link
Member

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

@madmoizo
Copy link
Author

madmoizo commented Nov 18, 2016

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
Copy link
Member

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
Copy link
Member

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?

@madmoizo
Copy link
Author

madmoizo commented Jan 29, 2017

  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
    image
    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...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants