How to Create a Mixed Chart Using Chart.js

Chart.js is robust enough that it allow you to combine multiple chart types, like bar and line charts, into one visual. This is especially useful when displaying datasets with different metrics or scales.

Here's a quick example of a Bar Chart being rendered alongside a Line Chart relying on the same graph space:

Let's take a look at how to set that up:

Step 1: Include Chart.js

Add Chart.js to your HTML with a CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Or install it via npm:

npm install chart.js

Step 2: Add a Canvas Element

Create a canvas where the mixed chart will be rendered:

<canvas id="myMixedChart" width="400" height="400"></canvas>

Step 3: Configure and Render the Chart

Here’s a sample combining bar and line datasets:

const ctx = document.getElementById('myMixedChart').getContext('2d');

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  datasets: [
    {
      type: 'bar',
      label: 'Revenue',
      data: [1200, 1900, 3000, 2500, 3200],
      backgroundColor: 'rgba(75, 192, 192, 0.5)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    },
    {
      type: 'line',
      label: 'Growth Rate (%)',
      data: [3, 4, 6, 5, 8],
      borderColor: 'rgba(255, 99, 132, 1)',
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      fill: false,
      yAxisID: 'y1'
    }
  ]
};

const config = {
  data: data,
  options: {
    responsive: true,
    interaction: {
      mode: 'index',
      intersect: false
    },
    stacked: false,
    scales: {
      y: {
        type: 'linear',
        position: 'left',
        title: {
          display: true,
          text: 'Revenue'
        }
      },
      y1: {
        type: 'linear',
        position: 'right',
        grid: {
          drawOnChartArea: false
        },
        title: {
          display: true,
          text: 'Growth Rate (%)'
        }
      }
    }
  }
};

new Chart(ctx, config);

Breakdown of Key Fields

• type: Declared individually within each dataset (e.g., 'bar', 'line').

• datasets: Holds multiple data series, each with its own type and styling.

  • yAxisID: Allows binding datasets to different y-axes.

• scales.y / scales.y1: Define multiple axes. Set drawOnChartArea: false to avoid overlap.

• interaction.mode: Ensures tooltips show both datasets when hovering.

Conclusion

Mixed charts are incredibly helpful for showing relationships between different data types. Chart.js makes it seamless to combine bar, line, and other chart types in a single view.

Related Articles

How to Render a Barchart using Chart.js

How to Create a Pie Chart using Chart.js