Chart keeps on shrinking uncontrollably

[mani-96]

Expected behavior

Chart should not resize unnecessarily

Current behavior

Chart keeps on shrinking if Zoom levels are changed or re-rendered. I am using primeng, so I thought this might be a bug with their component. But I was able to replicate it on chartjs official web page. Attached a video for the same.

Reproducible sample

https://www.chartjs.org/docs/latest/samples/bar/border-radius.html

Optional extra steps/info to reproduce

Screen.Recording.2025-05-20.184923.mp4

Possible solution

No response

Context

No response

chart.js version

4.4.9

Browser name and version

Chrome Version Version 136.0.7103.114 (Official Build) (64-bit) / Microsoft Edge Version 136.0.3240.76 (Official build) (64-bit)

Link to your project

No response

[mani-96]

If anyone else is facing the same issue and want a monkey-patch workaround for this, you can use onResize callback in options, get chart reference, assign chart.resize an empty function. Then after a timeout set it back to the chart resize method.

onResize: (chart: any, size: any) => { if (this.isShrinkingUncontrollably()) { this.resize = chart.resize; chart.resize = () => {}; setTimeout(() => { chart.resize = this.resize.bind(chart); }, 1000) } },

Below is code to check if it is shrinking.
count = 0; timeout: any = null; isShrinkingUncontrollably() { clearTimeout(this.timeout); this.count++; this.timeout = setTimeout(() => { this.count = 0; },80); return this.count > 5; }

Not a good solution but works for my use case

[ramonfeleus]

We have this issue too on our statistics dashboard. It happens when zoomed out to 90%, in our case only in Chrome and Edge on Windows (chrome on Mac is fine). Your patch works. I did add some extra setTimeouts at 500ms, 2s and 5s to account for different internet speeds. I found that when using 1000ms sometimes the internet was slower (when refreshing a couple of times), the bug then wasn't caught and still visible.

[only1982]

This happens when monitor scaling is set to 150% and browser zoom is set to 90%. Other zoom levels may also result in same affects, but never 100%.

On multi monitor setup this bug stops immediately if moving to a screen with a different display scaling setting and resumes when changing back to a monitor with 150%.

The issue probably isn’t Mac/windows relevant but based on device scaling and therefore the measuring and rounding of the canvas in pixels.

[LeeLenaleee]

Fixed by: #12097