reactchartjs/react-chartjs-2

[Bug]:Chart display & scaling

clinton-mwachia opened this issue · 5 comments

clinton-mwachia commented

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 commented

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.

  • 👍1
neptoo commented

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 commented

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

  • 👍1
zirho commented

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 commented

@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