Charts Shrinking on Page Load

[MichaelCropper]

Expected behavior

Normality

Current behavior

I know I've not changed anything on my end. All of a sudden various different chart types have been shrinking on page load for no apparent reason.

I'm pulling the JS from <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

I can't be the only one experiencing this, surely?

The setup I'm working with is basic out of the box ChartJS stuff that has been working fine for years.

Reproducible sample

Optional extra steps/info to reproduce

Possible solution

Context

chart.js version

v4.0.1

Browser name and version

No response

Link to your project

No response

[LeeLenaleee]

As per the issue template a reproducable sample is mandatory, please add one.

[jonellwood]

I am having the same issue. I was able to resolve one chart (bar chart) by adding min-height & min-width values in a style tag for the canvas element. But did not get the same result with a pie chart. I am pulling in data from a local dev database but I will attempt to get recreate on codepen and if I can reproduce the issue there I will post a link in this comment. I am happy to provide a copy of my code - but I am not sure if it would be of value since it references several local resources and is not in production

[jonellwood]

@MichaelCropper By using <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1"></script> in the head I was able to stop the issue. Not a fix, but its something.

[MichaelCropper]

Good shout @jonellwood That's solved the issue, just use an older version. Really surprised that this bug hasn't been resolved in hours. I think I first spotted this a couple of weeks ago.

[LeeLenaleee]

@MichaelCropper you are welcome to put in a PR if you can resolve the issue that quick

[dangreen]

@MichaelCropper Also, we would very much appreciate it if you provide a sandbox with issue reproduction

[jonellwood]

@dangreen I tried to get a pen that recreated the issue but alas it worked as expected and I could not recreate it. I will try again later tonight after work to see if I can get you a reproduction of the issue.

[MichaelCropper]

I've been having a play to see what is causing this as it is odd. The behaviour that I'm seeing is that the element is shrinking by 1 on a loop when hovering over the chart.

Took a lot of playing around and trying things, but found what is causing the issue.

To reproduce;

1. Open Chrome
2. CTRL + Scroll Down to get to 90% Zoom
3. Load page with a chart on (

#2 and #3 doesn't really matter which order you do this in, same issue in both orders

What is really odd that it seems that this issue is only 90% Zoom. Doesn't seem to be impacted on the other zoom levels.

I've also tried on different screen sizes (laptop + second monitor) and doesn't seem to be related to that.

[gbaron]

Should be fixed in v4.1.1

[MichaelCropper]

Good job chaps, I've just tested on v4.1.1 and this look to be fixed now.

[simPod]

We're still experiencing the issue on 4.4.1. Any way to debug?

[gbaron]

@simPod could you please post a reproducible sample?

[kurkle]

We're still experiencing the issue on 4.4.1. Any way to debug?

Chart.js need to have a container around the canvas, with nothing else in it. Maybe in your case it does not?
<div><chavas id="myChart"></canvas></div>

[MichaelCropper]

@simPod 4.4.1? Time travelling? Sure that is a typo, but if you could confirm what version you are running. Latest version is 4.1.1.

Also, what Web Browser? And what Zoom %?

The basic setup is working for me now in 4.1.1 since the fix with;

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.1.1"></script>

and

<canvas id="myChart"></canvas>

With the relevant stuff in the script tag for all the chart settings etc. (not shown for ease, copy from the docs)

[jonellwood]

Thats great news!

…

On Sat, Dec 17, 2022 at 4:58 PM MichaelCropper ***@***.***> wrote: Good job chaps, I've just tested on v4.1.1 and this look to be fixed now. — Reply to this email directly, view it on GitHub <#10932 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AO4TKLU7CYNCZ3KMKF2NHTTWNYZPBANCNFSM6AAAAAASRJSNQI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Jon Ellwood