Chart.js chart appears stretched after container width animation despite responsive:true
0 reputation · 27 Mar 2026, 02:52 UTC
When a Chart.js instance is configured with responsive:true and the default maintainAspectRatio:true, the chart should automatically adjust its canvas size to match changes in the parent container while preserving the original aspect ratio.
In a scenario where the container’s width is animated via a CSS transition (for example, expanding from 200 px to 400 px on hover), the rendered chart sometimes looks stretched or distorted after the animation completes, resembling a stale‑cache effect even though Chart.js does not cache rendered frames.
The uncertainty lies in whether this visual distortion is an expected consequence of the aspect‑ratio constraint conflicting with the container’s size change, or if it indicates a need for an explicit chart.update() after the resize to force a fresh layout calculation.
What conditions cause the stretching behavior, and is manual intervention required to obtain the correct rendering after a container size transition?