What is a Mixed Chart (Bar + Line) ?

by Mcs July 1, 2025

A Mixed Chart allows you to combine multiple chart types (like a bar chart + line chart) in one canvas using Chart.js. It’s perfect for comparing different data series with different styles — like values vs. trends.

A mixed chart (also known as a combination or combo chart) is a visualization that combines different chart types, such as bar and line charts, within a single graph. This allows for the comparison of different data series or the highlighting of trends and comparisons within the same visualization.

Key characteristics:

Multiple chart types:

Mixed charts incorporate elements from different chart types, most commonly bar and line charts.

Shared X-axis:

They typically share a common X-axis, allowing for direct comparison of data across different categories or time periods.

Different Y-axes (optional):

They can also utilize separate Y-axes for each chart type, especially when dealing with data measured in different units.

Versatile for comparison:

Mixed charts are useful for comparing different types of data within the same dataset, highlighting trends, and showing relationships between different sets of data.

Use cases:

Comparing sales with projections: Displaying actual sales (bars) alongside projected sales (line) over time.
Showing trends alongside specific values: Illustrating sales trends over time (line) and comparing them to specific target values (bars).
Analyzing performance metrics: Combining performance indicators (bars) with customer satisfaction scores (line).
Identifying outliers: Highlighting outliers or unusual data points within a dataset.
Data visualization for complex information: Presenting diverse datasets with varying scales and units.

Mixed Bar + Line Chart Example (Chart.js)

const myMixedChart = new Chart(ctx, {
type: 'bar', // Base chart type
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [
{
label: 'Sales',
data: [300, 400, 350, 500, 450],
backgroundColor: 'rgba(54, 162, 235, 0.6)',
yAxisID: 'y'
},
{
label: 'Growth %',
data: [5, 8, 6, 10, 7],
type: 'line', // <- Mixed chart magic here!
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
fill: false,
tension: 0.3,
yAxisID: 'y1'
}
]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
position: 'left',
title: {
display: true,
text: 'Sales'
}
},
y1: {
beginAtZero: true,
position: 'right',
title: {
display: true,
text: 'Growth %'
},
grid: {
drawOnChartArea: false
}
}
}
}
});
</script>