All chart examples in documentation are decreasing in size when hover

[igomonteiro]

Expected behavior

When triggering some hover event in a chart, the expected behavior is just to keep the real size.

Current behavior

The charts are decreasing in size when mouse hover event is triggered.

Reproducible sample

https://www.chartjs.org/docs/latest/samples/area/line-boundaries.html

Optional extra steps/info to reproduce

recording-2022-12-08-09-43-44.webm

Possible solution

I've been through a problem like this, the difference was that the graph didn't reduce, but increased. I solved it by inserting a container on the chart's canvas, it had something to do with the size (width and height) of the chart.

I've never seen this problem happen in the documentation.

But I don't consider it a solution, it's more like a workaround.

Context

No response

chart.js version

v4.0.1

Browser name and version

Microsoft Edge v107.0.1418.52

Link to your project

No response

[LeeLenaleee]

Could not reproduce, updated my edge to the latest version (108.0.1462.42) and there it also seems to work fine, did it on a pc running win 11 with a 192*1080 screen 🤔

[igomonteiro]

Could not reproduce, updated my edge to the latest version (108.0.1462.42) and there it also seems to work fine, did it on a pc running win 11 with a 192*1080 screen 🤔

Now I tested it in Chrome and the problem didn't really happen, it must be a problem with the version of Edge I'm using. And I can't even update it because the company I work for blocks updates and makes them available only from time to time. I just think it's weird because that it's not even an too old version, you know. Can you downgrade your browser and test in a similar version?

And it's even weirder because this problem only occurs in the latest version of the documentation.

[nbrown30]

I am experiencing the same thing. All of the samples continuously minimize. Setting options.responsive to false will stop the behavior.

Chrome Version 108.0.5359.99 (Official Build) (64-bit)

[gbaron]

I am experiencing the same thing (Chrome 108.0.5359.99 Mac).
Looking at issue #10932 - this comment describes how to reproduce the issue.

In my case, the specific scenario is:

1. Open https://www.chartjs.org/docs/latest/charts/line.html
2. Change browser zoom to 90% (i.e CMD+- on Mac)
3. Reload the page
4. Hover over one of the data points.
5. When the tooltip appears the chart will start to shrink

[kurkle]

Curious if this was fixed by #10942
Does it still reproduce in docs?

[gbaron]

I'm able to reproduce the issue (after the #10942 fix).
As far as I can see, the change that introduced the issue is #10646.
Specifically, commenting out the following lines from src/helpers/helpers.dom.js will eliminate the issue.

 if (aspectRatio && height > containerSize.height) {
    height = containerSize.height;
    width = round1(Math.floor(height * aspectRatio));
  }

I'll let you know if I find the root cause.

[carlosLMZarego]

I've the same problem, I noticed that this happens when you've a different zoom in your browser. Please let me know if it can be fixed or if there is some stable version that I can use

thank you

[gbaron]

The code below slightly changes the chart width and height on every call, for some values of pixelRatio.

Chart.js/src/helpers/helpers.dom.ts

Lines 222 to 226 in c4fbd5f

	const deviceHeight = Math.floor(chart.height * pixelRatio);
	const deviceWidth = Math.floor(chart.width * pixelRatio);
	chart.height = deviceHeight / pixelRatio;
	chart.width = deviceWidth / pixelRatio;

Note: pixelRatio equals Window.devicePixelRatio

For reference, as of today, when Chrome is set to Zoom %90, Window.devicePixelRatio equals 0.8999999761581421 on a "regular" display. On a Retina display, at zoom %90 it is 1.7999999523162842.

Since this code is invoked when handling resize (i.e ResizeObserver) it may continuously decrease the size of the chart.

I couldn't figure out the reason to update the chart size after calculating the deviceHeight and deviceWidth.

@LeeLenaleee, @kurkle - any thoughts?

[kurkle]

Looks like floating point arithetic errors are not considered there. The tests at lines 238 and 239 can easily fail, when the pixel ratio is not whole.

The chart width/height try to be accurate while deviceWidth/height are truncated to whole numbers.
I think the alues for the 2nd check should be rounded or almostEquals or similar helper should be used to mitigate sub-pixel changes.

Logging some values there could help to create a test for this, because the floating point arithmetic errors should be repeatable.

[kurkle]

My previous comment is actually mostly wrong, but loggign some numbers could still help creating a test :)

[obeythefro]

Experiencing the same issue. Migrating from 2.7 to 4.0.1 and found this in dev, hopefully this fixes it so we can push to prod. Thanks for the effort on this!

[techraiders]

I am experiencing the same thing. All of the samples continuously minimize. Setting options.responsive to false will stop the behavior.

Chrome Version 108.0.5359.99 (Official Build) (64-bit)

Wow! This just solved the problem for me.

[desoga10]

I am experiencing the same thing. All of the samples continuously minimize. Setting options.responsive to false will stop the behavior.

Chrome Version 108.0.5359.99 (Official Build) (64-bit)

This worked for me, cheers!