Chart.js
Chart.js copied to clipboard
chartjs
Doughnut Chart size is decreasing automatically when mouse hover
Expected behavior
Current and expected behavior I used 2 Doughnut charts in my react app with javascript. const stamina_data = { datasets: [ { label: "%", data: [5, 30], backgroundColor: ["#f83472", "#4c565d"], borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)"], borderWidth: 0, }, ], }; const power_data = { datasets: [ { label: "boost", data: [40], backgroundColor: ["#f83472"], borderColor: ["rgba(255, 99, 132, 1)"], borderWidth: 0, }, ], }; The issue happened with another developer who checked the chart when the mouse hovered over the chart. He asked me why the charts go decreased sometimes and I tried. But It was working on my side and others' side too. With some problem, I tried zooming in and out of the website.
Current behavior
All other cases are working but at zoom 90%, the issue happened to me too.
Auto decrease happening cases.
- Zoom change from 80% to 90%, 100% to 90%.
- Mouse hover when zoom is 90%
- Any size change events make the chart decrease.
Reproducible sample
https://react-chartjs-2.js.org/examples/doughnut-chart/
Optional extra steps/info to reproduce
No response
Possible solution
No response
Context
No response
chart.js version
^4.0.1
Browser name and version
Windows Chrome, Most updated
Link to your project
https://react-chartjs-2.js.org/examples/doughnut-chart/
I'm having the same issue. Seems like someone at core has dropped the ball.... Awaiting fix.
@WowDarkHole @MichaelCropper Hi. Could you please record a video with this issue?
I suspect it's the same issue as #10951
yes @gbaron, I opened this issue, but the difference was that in my browser it happened using 100% zoom, but in the day after I opened the issue, I tried to reproduce the bug again and nothing happened, then I tried the 90% zoom and the issue appeared again.
