chartjs/Chart.js

Charts not scaling back to size on window stretch

ken-sands opened this issue · 1 comments

Expected behavior

If I reduce the browser window the chart scales down, if I stretch it back the chart should return to full size

Current behavior

The chart reduces, but stays small when the browser window is stretched.

Reproducible sample

https://www.chartjs.org/docs/latest/charts/line.html

Optional extra steps/info to reproduce

I don't feel the need to codepen when all example pages in the docs suffer from this. take any page with a chart ie https://www.chartjs.org/docs/latest/charts/line.html
starting with a large browser window, make the window narrow to see the chart size reduce, now stretch the browser window back again.

Possible solution

This feels hacky and perhaps suggests the issue is more in the browser css than anything else but I found that making the containing div css "display: ruby" was the only way I could get it to scale properly. I'm testing in chrome on windows. I know from the docs that display: ruby is not intended for this use but I'm also not a web guy. Perhaps it's a clue to the real solution.

Context

I just wanted a few charts on a reports page, I found when I was scaling my browser about that the page suddenly looked awful and the only way to get it back was a refresh. Again I realise this may be a browser css thing more than a bug in the javascript however when all of the examples in the docs and the guides result in this issue it feels like a bug.

chart.js version

v4.4.4

Browser name and version

Chrome Windows Version 129.0.6668.90 (Official Build) (64-bit)

Link to your project

No response

Duplicate of: #11005