[Bug]:Chart display & scaling

[clinton-mwachia]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

• The chart get extremely small when changing screen size, you have to reload the page for a good display.
• The graph disappears when you move to a different tab, and then come back to the tab where the graph is. The same issue is also observed in the docs

Reproduction

https://react-chartjs-2.js.org/examples/vertical-bar-chart

chart.js version

v4.4.3

react-chartjs-2 version

v5.2.0

Possible solution

No response

[hrachqyutukyan]

I think this is the chromium issue. Canvas part disappears when changing tabs. In old chrome versions it works fine.

Update: on 125.0.6422.77 version issue is fixed.

[neptoo]

I have also noticed a similar issue when the page is zoomed below 100%.
When I hover my mouse over the chart, it gradually shrinks until it disappears completely.

[stevan-borus]

@neptoo I had the same problem on the pie chart. It happened on some screens and the zoom did not play any part...
I resolved it by setting the fixed width and height on the wrapper around the <Pie /> component.

[zirho]

when I apply height and width, it keeps the ratio and takes the smallest to fit. Is it how it is supposed to work?

[stevan-borus]

@zirho yes.. it auto-calculates the ratio of canvas inside the wrapper based on the wrapper width and height and fits the pie (+ legend if you have it) inside of it

if you hide the legend, the pie will take the whole space