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 ?!?

Could you please share what is the value of Window.devicePixelRatio

How can I get the Window.devicePixelRatio?

I can easily reproduce this on a mac with chart.js 4.1.0, but with 4.2.0 I can't. Played around with a lot of different display settings. But with mac it seems I can only get 1 or 2 as the "base" devicePixelRatio on screens, while in windows it can be something like 1.25 etc

Could you please share what is the value of Window.devicePixelRatio

How can I get the Window.devicePixelRatio?

Open the Developer Tools, then choose the Console and type window.devicePixelRatio. Thanks!

I can easily reproduce this on a mac with chart.js 4.1.0, but with 4.2.0 I can't. Played around with a lot of different display settings. But with mac it seems I can only get 1 or 2 as the "base" devicePixelRatio on screens, while in windows it can be something like 1.25 etc

On my MacBookPro, using an external display and Zoom %110 window.devicePixelRatio is 1.100000023841858

I'm asking because previously, the root cause was mishandling these non-integer values. I'm not sure if this is the case now.

Open the Developer Tools, then choose the Console and type window.devicePixelRatio. Thanks!

Mine is:

Another detail, my dpi zoom is 200% at 4k resolution.

Open the Developer Tools, then choose the Console and type window.devicePixelRatio. Thanks!

Mine is:

Another detail, my dpi zoom is 200% at 4k resolution.

Thank you; I ran some tests but unfortunately, I couldn't reproduce the issue.

How do you set the zoom level to 116%? I only see 110% and 125%...

It seems 116% will only be offered when the resolution is 4k/200%dpi. But I found an edge extension

https://microsoftedge.microsoft.com/addons/detail/vergr%C3%B6%C3%9Fern-f%C3%BCr-microsoft-/akclpjahoedloodjomjhnlmmblikemjj

with this I can reproduce the behavior at any resolution with 116% zoom.

the window.devicePixelRatio
at 125% = 2.5
at 110% = 2.200000047683716
at 100% = 2

maybe a rounding issue
at 116% = 2.31112003326416

Thank you. I'm now also able to reproduce the issue. The simplest way would be to set a style="zoom %116" on the <body> or <HTML> elements (depends on the setup, some other values may be needed to reproduce the issue).

It is probably a rounding issue.

I am able to reproduce it on Chrome too using "non-standard" zoom levels (i.e 117%)

Here is what I'm seeing:

getMaximumSize @ helpers.dom.ts is calculating the maximum size available for the chart. It starts with the available width and calculates the height based on the chart aspectRatio.

Then, the code below will check if the container's height is large enough. If it isn't, it will set the height to the container height (the width is also updated).

After the chart size is updated the browser will fire the ResizeObserver again. However, the container height is slightly less than the chart height (when zoom is active).

For example, when setting the chart height to be 454, the following invocation of ResizeObserver will return a new height of 453.984375.
As a result, the resize code will run again resulting in a new height of 453... ResizeObserver fires with 452.984375...
🤦‍♂️

At the moment I can't think of an elegant fix.

@kurkle @dangreen LMK if you can think of anything.

@gbaron Nice analysis, but what is the difference to v3.9.1 were it works?

At the moment I can't think of an elegant fix.

@gbaron Maybe just round values from resize observer ?

@gbaron I don't really know if something is happen with this issue, but Chart.js v4.2.1 don't fix it.

@fly74 that is true. v4.2.1 doesn't include any fixes.
I just submitted a PR (#11132).

@gbaron Can you provide an umd dist file for some tests?

It sounds like you've fixed it. In most of these edge cases with pixels, a good approach is to round down to the nearest e.g. 10 pixels, otherwise it can be easy for 1 pixel either way to cause a problem. You can do that with a simple mod 10.

Can this fix go into the official build?

does this being resolved with the latest release ?

Nothing seen in the release notes. Maybe anyone can do a test.

Nothing seen in the release notes. Maybe anyone can do a test.

indeed, I was waiting for the new release to update a solution, right now I can't test it on my laptop (not a high dpi screen), this happened with me on a client laptop (an XPS with high dpi) so I had to use @gbaron patch, so I guess i will wait for an official release notes ?!

You can test it with a browser plugin for zoom like described here some posts above or a browser you can set zoom to 116%. It is not depending on a hidpi screen.

I've tested the 4.3.0 it is not fixed. @gbaron

This happens to me with 4.3.0.

Settings that produce effect:
display is 3240 x 2160
Scale and Layout in Windows 10 set to 150%
zoom in chrome set to 90% or 110%

It doesn't happen if I change the scaling in chrome or in the windows settings to something other than above...

That's what I said. The fix ist not in the official release.

Would love to see this included in the official release. Signing up for notifications.

What are the blockers to releasing this fix? ( #11132 )

Also, what is the any workaround until it is released?

The only workaround for me was to compile the sorce from @gbaron above or use the resulting binary in my zip above. @shuuuuun

Thank you for your reply.
I'm looking for a way to make it as maintainable as possible.
I hope it will be released officially soon...

Is it fixed in 4.3.1?

I am still experiencing this with 4.3

@gbaron @lukos Is this fixed in 4.4.0? The solution is from @gbaron in this thread.

options={{ responsive: true, maintainAspectRatio: false }} <-- these options solved my issue

@avisek-official But doesn't that mean the chart will no longer keep its aspect ratio if proportions go askew?

@lincolnthree I can't say this a fix for the issue, but it worked for me. Try it once in your project too and test anything breaks in any resolution. In my case it didn't break anytime with any data.

Still experiencing this in 4.3.3, any fixes expected anytime soon?

Any new for this issue in the 4.4.1 release ?

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 ).