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.

1. Zoom change from 80% to 90%, 100% to 90%.
2. Mouse hover when zoom is 90%
3. 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/