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

Zooming in on a line chart on the category axis makes the line disappear #816

Open
fecipo opened this issue May 13, 2024 · 3 comments
Open

Comments

@fecipo
Copy link

fecipo commented May 13, 2024

I'm using a Chart.js (v4.4.1) in a React application with the usage of chartjs-plugin-zoom (v2.0.1) plugin to show some data in a line charts with one category axis and one linear axis for values.

Zooming in, in "xy" mode, until there is only one value on the category axis makes the line chart disappear.

without zoom:
image

after 1st tick of zoom:
image

after 2nd tick of zoom:
image

@kurkle
Copy link
Member

kurkle commented Nov 17, 2024

I'd suggest setting limits: { x: { minRange: 2 } }, see: https://www.chartjs.org/chartjs-plugin-zoom/master/samples/wheel/category-min-range.html

@acc-cassio
Copy link

I'm having the same issue, see recording:
https://github.com/user-attachments/assets/58603b1b-b178-47fc-ad39-ebb5907f292a

There seems to be a miscalculation of the chart portion which the plugin thinks needs to be painted. Limiting the minimum range as suggested by @kurkle does not solve the problem unfortunately.

Versions used:
"chart.js": "4.3.2",
"chartjs-plugin-zoom": "^2.2.0",

@acc-cassio
Copy link

acc-cassio commented Jan 11, 2025

UPDATE: I managed to solve my particular issue by installing the latest version of chart.js (v4.4.7). Sorry for any inconvenience.

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

No branches or pull requests

3 participants