Chart.js chart appears stretched after container width animation despite responsive:true

Manual intervention is required to obtain correct rendering after a CSS transition. The stretching behavior occurs because Chart.js does not continuously track intermediate frames of a CSS-driven animation; it updates the canvas based on resize events or ResizeObserver triggers, which may not align perfectly with the completion of a CSS transition.

The Cause of Visual Distortion

When responsive: true and maintainAspectRatio: true are enabled, Chart.js sets the internal canvas drawing surface (the width and height attributes) to match the container's dimensions. However, a CSS transition on the container's width changes the CSS layout size without necessarily updating the canvas attribute size in real-time.

The resulting "stretched" look is not a cache issue, but a browser scaling issue: the browser takes the existing bitmap (rendered at the old size) and stretches it to fit the new CSS dimensions of the container. Because the internal resolution of the canvas is now lower than the displayed size, the chart appears distorted or blurry.

Resolution Steps

To resolve this, you must force Chart.js to recalculate the canvas dimensions once the animation has reached its final state. Assuming Chart.js v3 or v4, follow these steps:

1. Listen for the Transition End: Use the transitionend event on the parent container to ensure the final width is reached before triggering a redraw.
2. Trigger a Resize: Call the .resize()` method on the chart instance. This updates the canvas attributes to match the current CSS dimensions and redraws the chart.

const container = document.getElementById('chart-container');
const myChart = new Chart(ctx, config);

container.addEventListener('transitionend', (event) => {
  // Only resize if the width property was the one animated
  if (event.propertyName === 'width') {
    myChart.resize();
  }
});

Verification and Constraints

• Positioning: Ensure the parent container has position: relative, absolute, or fixed. Without this, the responsive logic may fail to calculate the container size correctly.
• Performance: Avoid calling .update() or .resize() inside a requestAnimationFrame loop during the transition, as this can cause significant flickering and performance degradation.

Diagnostic Detail: Are you using transform: scale() instead of width for the animation? If so, ResizeObserver will not detect the change, and a manual .resize() call is mandatory regardless of the event used.