Chart.js Mixed Charts — Combining Multiple Chart Types

DodaTech Updated 2026-06-28 3 min read

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

Chart.js mixed charts allow combining bar, line, and other chart types on a single canvas with shared X axis and independent Y axes.

What You'll Learn

By the end of this guide, you will create combined bar-and-line charts, configure dual Y axes with different scales, manage dataset mixing rules, and build a revenue-and-profit dashboard.

Bar and Line Combo

new Chart(document.getElementById('mixed'), {
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        datasets: [
            {
                type: 'bar',
                label: 'Revenue',
                data: [300, 450, 400, 600, 550],
                backgroundColor: '#4ecdc4'
            },
            {
                type: 'line',
                label: 'Profit Margin',
                data: [15, 20, 18, 25, 22],
                borderColor: '#ff6b35',
                fill: false,
                yAxisID: 'y1'
            }
        ]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                title: { display: true, text: 'Revenue ($)' }
            },
            y1: {
                beginAtZero: true,
                position: 'right',
                title: { display: true, text: 'Margin (%)' },
                grid: { drawOnChartArea: false }
            }
        }
    }
});

Dual Axis Configuration

options: {
    scales: {
        y: {
            type: 'linear',
            display: true,
            position: 'left',
            title: { display: true, text: 'Left Axis' }
        },
        y1: {
            type: 'linear',
            display: true,
            position: 'right',
            title: { display: true, text: 'Right Axis' },
            grid: { drawOnChartArea: false }
        }
    }
}

Mixing Rules

// Each dataset can have its own type
datasets: [
    { type: 'bar', data: [...], label: 'Bars' },
    { type: 'line', data: [...], label: 'Line', yAxisID: 'y1' },
    { type: 'bubble', data: [...], label: 'Bubbles' }
]

Common Mistakes

1. Forgetting yAxisID

Without yAxisID, all datasets share the same Y axis. Use different IDs for dual axes.

2. Hiding Grid for Second Axis

Two grids overlay confusingly. Set grid: { drawOnChartArea: false } on one axis.

3. Mismatched Scale Ranges

If one dataset has values 0-1000 and another 0-10, the second is invisible. Use dual axes.

4. Mixing Incompatible Types

Not all types can mix. Bubble and scatter need numeric axes. Bar needs categorical. Ensure compatibility.

5. No type on Chart Constructor

When mixing types, omit type on the Chart constructor and set type per dataset.

Practice Questions

Q1: How do you specify chart type per dataset? A: Add a type property to each dataset object: { type: 'bar', ... }.

Q2: What is the yAxisID property for? A: It assigns a dataset to a specific Y axis, defined in options.scales.

Q3: Can you mix more than two types? A: Yes. Bar, line, scatter, and bubble can all coexist on one chart.

Q4: How do you prevent grid overlap? A: Set grid: { drawOnChartArea: false } on the secondary axis.

Q5: What types cannot be mixed? A: Pie, doughnut, polarArea, radar — these use circular layouts incompatible with Cartesian types.

Challenge: Build a sales dashboard showing monthly revenue (bars), order count (line on right axis), and return rate (line on same axis, dashed).

FAQ

Can I mix pie and bar?

No. Pie uses polar coordinates, bar uses Cartesian. They cannot share a canvas.

How do I add a third Y axis?

Define a third scale (y2) and assign datasets with yAxisID: 'y2'.

Do mixed charts support animations?

Yes. Each dataset animates independently based on its chart type.

Can I use stacked bars with a line overlay?

Yes. Set the bar dataset's stack property and keep the line dataset separate.

Is the mixed chart type available in Chart.js v3?

Yes. The per-dataset type property works in both v3 and v4.

Try It Yourself

Build a bar-line combo chart.

<!DOCTYPE html>
<html>
<head>
    <title>Mixed Chart Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Monthly Performance</h2>
<canvas id="mixed" width="600" height="400"></canvas>
<script>
new Chart(document.getElementById('mixed'), {
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [
            {
                type: 'bar',
                label: 'Revenue',
                data: [30, 45, 40, 60, 55, 70],
                backgroundColor: '#4ecdc4'
            },
            {
                type: 'line',
                label: 'Orders',
                data: [120, 180, 150, 220, 200, 260],
                borderColor: '#ff6b35',
                backgroundColor: '#ff6b35',
                yAxisID: 'y1',
                fill: false,
                tension: 0.4
            }
        ]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                title: { display: true, text: 'Revenue ($K)' }
            },
            y1: {
                beginAtZero: true,
                position: 'right',
                title: { display: true, text: 'Orders' },
                grid: { drawOnChartArea: false }
            }
        }
    }
});
</script>
</body>
</html>

What's Next

Configure scale options in depth.

Scale Options — Advanced scale configuration. Tooltip Legend — Tooltip and legend configuration.

← Previous Chart.js Polar Area Chart — Segmented Circular Display Next → Chart.js Scale Options — Axis Configuration and Customization

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Chartjs