[Bug]:Chart display & scaling

reactchartjs / react-chartjs-2

React components for Chart.js, the most popular charting library

https://react-chartjs-2.js.org

MIT License

6.64k stars 2.37k forks source link

[Bug]:Chart display & scaling #1212

Open clinton-mwachia opened 6 months ago

clinton-mwachia commented 6 months ago

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 6 months ago

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 commented 4 months ago

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 4 months ago

@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 commented 1 month ago

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 1 month ago

@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