Skip to content

Chart.js Responsive — Adaptive and Fluid Chart Layouts

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about Chart.js Responsive. We cover key concepts, practical examples, and best practices to help you master this topic.

Chart.js responsive charts automatically resize to fit their container while maintaining aspect ratio or adapting layout based on available space.

What You'll Learn

By the end of this guide, you will configure responsive and maintainAspectRatio options, set min and max dimensions, handle resize callbacks, build mobile-responsive dashboards, and optimize for different screen sizes.

Basic Responsive Config

options: {
    responsive: true,
    maintainAspectRatio: true,
    aspectRatio: 1.5
}

Fixed Height with Responsive Width

// CSS
canvas {
    width: 100%;
    max-height: 350px;
}

// JS
options: {
    responsive: true,
    maintainAspectRatio: false
}

Resize Callback

options: {
    responsive: true,
    onResize: function(chart, newSize) {
        console.log('Chart resized:', newSize);
        if (newSize.width < 400) {
            chart.options.plugins.legend.display = false;
        } else {
            chart.options.plugins.legend.display = true;
        }
    }
}

Device-Specific Options

options: {
    responsive: true,
    maintainAspectRatio: true,
    aspectRatio: window.innerWidth < 600 ? 1 : 1.5,
    plugins: {
        legend: {
            display: window.innerWidth >= 400
        }
    }
}

Common Mistakes

1. Canvas Without Container Width

A canvas inside a div with no explicit width will collapse to 0. Set container width via CSS.

2. maintainAspectRatio false Without Height

When aspect ratio is not maintained, the canvas needs explicit height or max-height in CSS.

3. Multiple Charts Resize Fighting

Multiple responsive charts on one page can cause layout thrashing. Use a ResizeObserver per chart container.

4. Not Redrawing After Window Resize

Chart.js handles resize automatically when responsive: true. No manual resize listener needed.

5. Canvas Stretching from CSS

CSS width/height on the canvas element stretches the rendered output. Let Chart.js control canvas dimensions.

Practice Questions

Q1: What does maintainAspectRatio do? A: When true, the chart keeps the aspectRatio regardless of container dimensions.

Q2: How do you set a specific aspect ratio? A: Set options.aspectRatio to a number (width/height). Default is 2.

Q3: How do you make a chart full-width with fixed height? A: Set maintainAspectRatio: false and set the container's height via CSS.

Q4: What happens when the container is too small? A: The chart shrinks to fit. Labels may overlap. Adjust font size on resize callback.

Q5: How does Chart.js detect resize? A: Chart.js uses ResizeObserver if available, falling back to window resize events.

Challenge: Build a dashboard with 4 charts. On mobile (width < 600px), charts stack vertically and hide legends. On desktop, charts are in a 2x2 grid.

FAQ

Do I need to call destroy on resize?

No. Chart.js handles resize automatically. Only destroy the chart when removing it from the DOM.

Can I resize a chart programmatically?

Yes. Call chart.resize(width, height) to set custom dimensions.

How do I prevent chart from becoming too small?

Set options.responsive: true and apply min-width on the container.

Does Chart.js work in hidden tabs?

No. Charts in display:none containers report zero dimensions. Use chart.reize() when the tab becomes visible.

How do I handle container size changes from CSS animations?

CSS transitions on the container may cause temporary zero-size. Use onResize to detect and skip zero-sized updates.

Try It Yourself

Build a responsive chart with variable aspect ratio.

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Chart Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .chart-container { width: 100%; max-width: 700px; height: 350px; margin: 0 auto; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px; }
        canvas { width: 100% !important; height: 100% !important; }
    </style>
</head>
<body>
<h2>Responsive Chart</h2>
<p>Resize the browser to see the chart adapt</p>
<div class="chart-container">
    <canvas id="respChart"></canvas>
</div>
<script>
new Chart(document.getElementById('respChart'), {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
            label: 'Revenue',
            data: [30, 45, 40, 60, 55, 70],
            borderColor: '#4ecdc4',
            fill: false,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: window.innerWidth >= 400 }
        },
        onResize: function(chart, size) {
            chart.options.plugins.legend.display = size.width >= 400;
        }
    }
});
</script>
</body>
</html>

What's Next

Build custom plugins.

Plugins — Custom Chart.js plugins. Data Labels — Data labels plugin.

← Previous Chart.js Animations — Transition Effects and Motion Configuration Next → Chart.js Plugins — Extending Chart Functionality

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Chartjs