Making Chart.js Charts Fluid with responsive:true and maintainAspectRatio:false

Useful answer

To make a Chart.js chart resize automatically when its parent container changes size, set responsive: true and maintainAspectRatio: false in the chart options. This tells Chart.js to listen for resize events, clear the canvas, recalculate dimensions from the container’s current width and height, and redraw without locking the chart to a fixed aspect ratio.

How it works – a worked example

Assume you have a div that can grow or shrink with the page layout:

<div id="chart-container" style="width: 100%; max-width: 600px; height: 400px;">
  <canvas id="myChart"></canvas>
</div>

Create the chart with the two key options:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{ label: 'Sales', data: [30, 50, 40, 70], backgroundColor: 'rgba(54,162,235,0.6)' }]
  },
  options: {
    responsive: true,          // redraw on container size change
    maintainAspectRatio: false // allow free height/width scaling
  }
});

When the browser window is resized or the container’s CSS changes, Chart.js internally:

1. Fires a resize observer on the container.
2. Clears the existing canvas.
3. Reads the container’s computed width and height.
4. Sets the canvas width and height attributes to those values (accounting for device pixel ratio).
5. Recalculates scales, layouts, and draws the chart again.

Because maintainAspectRatio is false, the chart’s height is not forced to maintain the original width‑to‑height ratio; it simply fills the container as defined by CSS.

Limits and common mistakes

Zero‑dimension rendering

If the container (or the canvas itself) has no measurable height or width when the chart is instantiated—e.g., the parent is hidden with display:none or lacks an explicit height—Chart.js will create a canvas with width: 0 and height: 0. The chart appears blank until the container gains size and a resize event triggers a redraw.

Forced aspect ratio

Setting maintainAspectRatio: true (the default) locks the chart’s height to width / aspectRatio. In a fluid container this can cause unwanted whitespace or clipping because the chart refuses to deviate from the original ratio.

Dynamic DOM insertion

When a chart container is added to the DOM after the page loads (e.g., via a framework’s virtual DOM), you must either:

• Initialize the chart after the container is mounted, or
• Call chart.resize() once the container has measurable dimensions.

Failing to do so leaves the chart at the size it had during initialization (often zero).

Practical verification

Open Chrome DevTools, select the #myChart canvas, and note its width and height attributes. Resize the browser window or change the container’s inline style (e.g., height: 300px). The attributes should update and the chart should redraw. In the console you can also run:

myChart.resize(); // triggers a manual redraw

If the chart redraws without errors and the canvas dimensions change, the responsive behavior is working.