Chart.js Mixed Chart

Chart.js can create mixed charts composed of two or more different chart types, such as a combination of bar and line charts.

When creating mixed charts, we specify the chart type for each dataset.

The mixed chart type attribute is scatter.

The bar chart type attribute is bar, and the line chart type attribute is line. The type describes the chart type.

const mixedChart = new Chart(ctx, {
    data: {
        datasets: [{
            type: 'bar',
            label: 'Bar Dataset',
            data: [45, 49, 52, 48]
        }, {
            type: 'line',
            label: 'Line Dataset',
            data: [50, 40, 45, 49],
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: options
});

Next, we create a simple mixed chart:

Example

const ctx = document.getElementById('myChart');
const data = {
  labels: [
    'January',
    'February',
    'March',
    'April'
  ],
  datasets: [{
    type: 'bar',
    label: 'Bar Dataset',
    data: [45, 49, 52, 48],
    borderColor: 'rgb(255, 99, 132)',
    backgroundColor: 'rgba(255, 99, 132, 0.2)'
  }, {
    type: 'line',
    label: 'Line Dataset',
    data: [50, 40, 45, 49],
    fill: false,
    borderColor: 'rgb(54, 162, 235)'
  }]
};
const config = {
  type: 'scatter',
  data: data,
  options: {
    responsive: true, // Set the chart to be responsive, changing according to the screen window
    maintainAspectRatio: false, // Maintain the original aspect ratio of the chart
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};
const myChart = new Chart(ctx, config);

The output of the above example is: