Skip to content

fix(dom): update canvas style on resize to allow chart to grow#12188

Open
jonathan-fulton wants to merge 1 commit intochartjs:masterfrom
jonathan-fulton:fix/12177-resize-enlarge
Open

fix(dom): update canvas style on resize to allow chart to grow#12188
jonathan-fulton wants to merge 1 commit intochartjs:masterfrom
jonathan-fulton:fix/12177-resize-enlarge

Conversation

@jonathan-fulton
Copy link

Summary

Fixes #12177

When a chart's container grows (e.g., window resize making the container larger), the canvas would not grow to fill the new space. The canvas style dimensions were only set initially but not updated on subsequent resizes.

Changes

  • Enhanced retinaScale function in helpers.dom.ts to update the canvas style dimensions during resize if they were previously set by Chart.js
  • This ensures the canvas can grow when its container grows, not just shrink

Technical Details

The fix checks if the current style dimensions differ from the chart dimensions and updates them accordingly. This maintains the behavior where Chart.js-managed styles are kept in sync with the actual chart size.

When the chart's container grows, the canvas style width/height
were not being updated because they were already set (from initial
render). This caused the chart to shrink correctly but not grow
when the window was enlarged.

This fix updates the canvas style width/height during resize when
they differ from the current chart dimensions, allowing the chart
to properly resize in both directions.

Fixes chartjs#12177
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Chart no longer resizes correctly when enlarging the window

1 participant