Souds like a duplicate of #10932 which was already fixed and should not happen in this version, I also don't see the behaviour you specified in this version.

Are you sure you are using v4.2.0?

This gif shows the issue I mentioned. It is on the chart.js documentation site. I am assuming the site would be using the latest version of chart.js, and the documentation indicates it is v4.2.0 (visible in the gif). The site is opened using Google Chrome, at 90% zoom.

I reviewed #10932 and it looks like it is exactly this problem.

From what I've gathered, it may be an issue isolated to the combination of a Windows OS and Google Chrome browser. In particular, someone else running Linux does not have the same issue on their Chrome browser, but it does happen on other Windows machines. As I mentioned earlier as well, the behavior does not happen when I try to reproduce it on Firefox.

To be thorough, I double-checked the chart.js version in my project. It was at v4.1.2, which has now been upgraded to v4.2.0, but the issue remains. Considering the example I shared in the gif, however, I don't think my project setup is relevant to the issue.

Same for me in 4.2.0 with browser zoom is set to 116%. It zooms to zero and again when the mouse lay over the chart. I'm using the umd variant.

@TrevorThiessen57 @fly74 Hi. Could you please share OS and browser versions?

@TrevorThiessen57 Sure, Windows 11 latest updates and Edge Version 109.0.1518.69.

@dangreen Windows 10 Pro 64-bit Version 21H2 OS build 19044.1645, and Google Chrome Version 109.0.5414.120 (Official Build) (64-bit)

@fly74 @TrevorThiessen57 Could you also share screen resolution?

@dangreen 3840 x 2160

@fly74 @TrevorThiessen57 Could you also share screen resolution?

3840x2160 (4K)

I don't have access to a screen with that resolution. Anyone knows of a trick to simulate that?

You can use Remote Desktop to another machine and set the resolution via cli. You have then scrollbars in the rdp window.

@gbaron You can use browserstack.com, but I'm already tried and can't reproduce this bug.

It is strange, it only happens when zoom is 116% in my case, 110/125 % works. :/
Maybe a function with round problem ?!?

I really hope so 🙏

Sorry can't wait any longer. Move on to Grafana. :/

But I'm not angry, I used it for a long time.

The fix is still being reviewed ?
#11132

I am experiencing the problem with the latest version of Chart as well.

Version 4.4.1 and the problem is still there.
Disabling maintainAspectRatio it actually works. However, loading the page at 25% and zooming to 100% produces a way-too-blurry Chart. Not an option to me.

If you want a workaround, look at #11224 (comment)

To me a workaround was to force the pixel ratio for charts to 1, by setting the devicePixelRatio: 1 option ( https://www.chartjs.org/docs/latest/configuration/device-pixel-ratio.html ).

We were having a similar issue where opening or closing Chrome's dev console was causing the graph to visually break.

We were able to resolve it by removing this line from options:

devicePixelRatio: 4,

Related threads for convenience:

• Chart shrinking excessively when browser zoom not set to 100% #10890
• Chart shrinking uncontrollably on browser zoom #11089
• All chart examples are decreasing in size when pixelRatio is non-terminating value #11224
• Doughnut Chart size is decreasing automatically when mouse hover or click #11304
• Please can #10890 be reopened as it's not fixed? #11547

Calling mychart.resize() also reproduces the bad scaling issue.

Any updates on this? I have some users running into this issue but cant reproduce it myself. Is the fix mentioned planned to be merged any time soon?

@linusrush For reproducing: Try various zooms on various devices.
For workaround: #11224 (comment)