chartjs-plugin-zoom icon indicating copy to clipboard operation
chartjs-plugin-zoom copied to clipboard

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

Open fecipo opened this issue 1 year ago • 3 comments

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

fecipo avatar May 13 '24 12:05 fecipo

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

kurkle avatar Nov 17 '24 20:11 kurkle

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 avatar Jan 11 '25 13:01 acc-cassio

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

acc-cassio avatar Jan 11 '25 16:01 acc-cassio