Zooming in on a line chart on the category axis makes the line disappear
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:
after 1st tick of zoom:
after 2nd tick of zoom:
I'd suggest setting limits: { x: { minRange: 2 } }, see: https://www.chartjs.org/chartjs-plugin-zoom/master/samples/wheel/category-min-range.html
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",
UPDATE: I managed to solve my particular issue by installing the latest version of chart.js (v4.4.7). Sorry for any inconvenience.