Chart shrinking excessively when browser zoom not set to 100%

[SG214]

Expected behavior

Chart should shrink appropriately during initial load or browser resize.

Current behavior

Chart either shrinks to nothing, then re-appears, or excessively shrinks then eventually stops.
Behaviour is inconsistent between page loads.

Reproducible sample

https://www.chartjs.org/docs/latest/charts/line.html

Optional extra steps/info to reproduce

Using Chrome desktop browser, set browser zoom to 110% and open the line chart example.

Reload the page to check chart behaviour on each page load.
Chart will either resize slightly, resize excessively, or shrink to nothing and then re-appear in a continuous loop.

Setting browser zoom to 125% seems to avoid "shrink to nothing", but still shrinks excessively on some page loads, and not others. Setting to 90% also has unpredictable results. 200% seems reasonably stable.

Resize browser window when zoom level other than 100% to see similar behaviour.

Possible solution

Seems to be related to retina/high Device Pixel Ratio chart responsiveness handling, perhaps related to the issue mentioned here.

Context

Setting browser zoom > 100% also increases device pixel ratio to a value above 1 on desktop browser.

chart.js version

v4.0.1

Browser name and version

Linux Chrome 106.0.5249.103

Link to your project

No response

[andrey-hohlov]

OS X 12.6.1, Retina 2880 × 1800 (1440x900)
Google Chrome 107
Chart goes crazy on browser zoom 90%

Screen.Recording.2022-11-24.at.20.35.24.mov

[Jonathan9168]

Windows 10, 1920x1080
Google Chrome 107
When responsive setting is set to true, graph shrinks excessively and the problem is amplified when zooming out to 90%. Sometimes hovering on data points will also cause a start and stop shrinkage

Desktop.2022.11.24.-.20.37.58.04.mp4

[topherseance]

+1

chart shrinks to nothing if you hover your mouse over it.
shrinking stops when you move the mouse somewhere else.

[KajsaEklof]

Had the same issue but found that adding maintainAspectRatio: false to the options fixed it! It's mentioned in the docs here: https://www.chartjs.org/docs/latest/configuration/responsive.html#important-note

[samiemad]

We also have this issue. Is there any ideas why it happens and when to expect a fix?

P.S. the workaround from @KajsaEklof did not work for me. The chart just gets completely squashed vertically... :(

[Jonathan9168]

Had the same issue but found that adding maintainAspectRatio: false to the options fixed it! It's mentioned in the docs here: https://www.chartjs.org/docs/latest/configuration/responsive.html#important-note

Doesn't work for me, It causes the graph to start flickering

[dankell]

Can confirm that we are seeing the same issue specifically with Browser Zoom at 90%

maintainAspectRatio: false does seemed to solve the issue, but it has returned after a couple of refreshes/changes of data

[gbaron]

Could you please test v4.1.1

[grindSunday]

Could you please test v4.1.1

I'm seeing this in v4.1.1 on my line chart on my high resolution monitor only.

I have 3 monitors:
x2 1920- x 1080
x1 3840 x 2160

When I start my page with the chart in chrome with a low res monitor, the chart is fine. No infinite shrink. When I move the browser over to my high res. monitor, it starts the infinite shrink process. No resizing of the window seems to fix the issue.

When I start my page with the chart in chrome on a high res monitor, same issue.

[lukos]

Still there in 4.2.1, if browser is set to 90%, the canvas shrinks slowly to nothing. At 100% it is fine. I will try maintainAspectRatio: false but that doesn't seem like a nice solution.

[VoVAllen]

Same problem

[boccoadam]

Same problem. Using chrome headless to print to pdf and set zoom: 80%; on body and charts slowly shrink and then pop back to full size and shrink to nothing again.

[Akshay-Arjun]

The problem is still present in v4.4.0. CC @gbaron

[zackees]

Hitting this problem too with

"chart.js": "^4.4.0",
"chartjs-chart-geo": "^4.2.7",

[Balabk5]

still problem persist. any fixes available?

[mmansson]

Problem still exist in 4.4.1. All samples on chart.js homepage behaves this way. I´m amazed that this issue still has not been addressed.

After some more testing it seems to be related to screen resolution. When running on a 4K screen this issue appears.

[willonf]

I will never understanding why a not solved issue always be closed without solution. Same problem here. Any fix?

[dhrumil4u360]

Facing same issue...

[kgoddard96]

Why is this closed lool

[alessio-barbone]

Still having this problem with:

"chart.js": "^4.4.1",
"chartjs-plugin-annotation": "^3.0.1",

[tomasserravento]

Can confirm that we are seeing the same issue specifically with Browser Zoom at 90%

maintainAspectRatio: false does seemed to solve the issue, but it has returned after a couple of refreshes/changes of data

I had this problem with v4.4.2 and this worked for me. Thank you so much!

[Althafrasal]

I am using Chart.js version 4.4.2 and encountering the same issue.
The charts are getting shrinked while the screen size is not set to 100%.

[adirdoor10]

Got the same issue, i added
responsive: true,
maintainAspectRatio: false,
but still it shrinks on 90%

[pantharshit007]

check this thread maybe you find some solution as of July 2024: here
@Althafrasal
@adirdoor10

[Pikamander2]

@etimberg - This issue was never resolved and still exists in 4.4.4. Can it please be reopened?

[Pikamander2]

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

[Pikamander2]

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

[abid365]

Why is the issue closed without providing any permanent solution? very frustrating. Tried all the method that is mentioned above as well as the referenced thread to stackover flow. nothing worked. the problem remains same as before.

[Obscurus5]

Setting the following css for the canvas element resolved this for me

#historyChart{
        min-width: 100% !important;
        min-height: fit-content !important;
}