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

Fix zoom outside of chart area #811

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

gopal-panigrahi
Copy link

@gopal-panigrahi gopal-panigrahi commented Mar 17, 2024

Fix: #770
Fix: #807

Changes:

  1. Attaches mousemove event to canvas.ownerDocument for calculating drag rectangle even when cursor is outside the chart area.
  2. checks if endpoint of drag rectangle is outside the chart area then endpoint is calculated based on clientX/Y - chartArea.left/top
  3. clips drag rectangle to the chart area.

@gopal-panigrahi
Copy link
Author

Hi @kurkle,
Please can you review the PR.

@zloveless
Copy link

Hi @gopal-panigrahi
I believe this would fix an issue we're having in our charts. Is there any portable solution I can try on my end to see if it works?

@gopal-panigrahi
Copy link
Author

gopal-panigrahi commented May 19, 2024

Hi @zloveless,
In our project, I had to create a patch file for these changes, you can try the same.
I used the patch-package library.

@zloveless
Copy link

Hi @zloveless, In our project, I had to create a patch file for these changes, you can try the same. I used the patch-package library.

Thanks! I found some code in one of the tracking issues on this here... I just used added a callback to onZoomStart() to check if the zoom action is in the chart area. I still wish one of these PR's that fix it would get merged.

@joshkel
Copy link
Contributor

joshkel commented Jul 29, 2024

Thanks for working on this, @gopal-panigrahi. I'm curious about the changes in d9fd526 - to me, the behavior feels cleaner without this change (letting the drag rectangle pin to the edges of the chart area, instead of the edges of the canvas). Were there specific issues that you ran into, or is it more of a UX preference?

@gopal-panigrahi
Copy link
Author

gopal-panigrahi commented Sep 17, 2024

Hi @joshkel ,
I had bounded the drag rectangle to pin to the edges of the chart area, instead of the edges of the canvas but then zoom is enabled for x and y axis region, which causes issues while creating rectangles.

If we enable zoom for only chart area then we can pin the drag rectangle to the edges of chart area.

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

Successfully merging this pull request may close these issues.

Chartjs-plugin-zoom drag issue Drag to the outside of the chart doesn't work correctly
3 participants