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

Out-of-range datapoints are shown in tooltip of scatter chart #10108

Closed
ms-tng opened this issue Jan 28, 2022 · 3 comments
Closed

Out-of-range datapoints are shown in tooltip of scatter chart #10108

ms-tng opened this issue Jan 28, 2022 · 3 comments

Comments

@ms-tng
Copy link

ms-tng commented Jan 28, 2022

Expected behavior

When hovering a scatter chart, no tooltip should be displayed for datapoints that are outside of the range defined by the Axis Range Settings (https://www.chartjs.org/docs/latest/axes/#axis-range-settings).

Current behavior

When hovering a scatter chart, it can happen that a tooltip is displayed for a datapoint that is outside of the range defined by the Axis Range Settings (https://www.chartjs.org/docs/latest/axes/#axis-range-settings).

In the attached reproducible sample, when you hover the chart near the point (1,0), the datapoint (0,0) is displayed in the tooltip although the min setting for the x axis is 1 and so (0,0) is out of range.

Additional information:

  • This seems to be more likely to happen when there is a large number of datapoints and/or the chart area is small, so it might be due to a rounding error.
  • It can be worked around by subtracting a large enough offset from all x coordinates that are less than the min value. Removing those datapoints from the data all together is usually not an option if you need the animation to work when you switch between different views into a set of datapoints by changing the range settings.

bug

Reproducible sample

https://codepen.io/ms-tng/pen/RwjPYGX

Optional extra steps/info to reproduce

Hover the chart near the point (1,0)

Possible solution

It seems that the comparison between coordinates and range settings is done after converting to pixel values, which can lead to rounding errors. Maybe this comparison can be done on the coordinates directly.

See https://github.com/chartjs/Chart.js/blob/v3.7.0/src/controllers/controller.line.js#L154

Context

No response

chart.js version

v3.7.0

Browser name and version

Google Chrome 97.0.4692.99

Link to your project

No response

@etimberg etimberg added this to the Version 3.8.0 milestone Feb 12, 2022
@t-mangoe
Copy link
Contributor

t-mangoe commented Apr 2, 2022

I tried to work on this issue.
I fixed the code just a little to only get items in the chart area when creating the tooltip.

If you don't mind, may I try to send a PR?
(Or, do I not need to contribute on this issue since the milestone is set?)

@etimberg
Copy link
Member

etimberg commented Apr 2, 2022

@t-mangoe feel free to send a PR if you have one. Please include tests as well

@t-mangoe
Copy link
Contributor

t-mangoe commented Apr 9, 2022

Thank you for your comment.
OK. I'll send a PR when it is ready.

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