Chart.js Mixed Charts

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

When creating a mixed chart, we specify the chart type on each dataset.

Mixed chartstypeThe attribute isscatter。

bar charttypeThe attribute isbar, line charttypeThe attribute isline, type describes the chart type.

const mixedChart = new Chart(ctx, {
    data: {
        datasets: [{
            type: 'bar',
            label: '柱形图数据集',
            data: [45, 49,52, 48]
        }, {
            type: 'line',
            label: '折线图数据集',
            data: [50, 40, 45, 49],
        }],
        labels: ['一月份', '二月份', '三月份', '四月份']
    },
    options: options
});

Next, let's create a simple mixed chart:

Example

const ctx = document.getElementById('myChart');
const data = {
  labels: [
    'January',
    'February',
    'March',
    'April'
  ],
  datasets: [{
    type: 'bar',
    label: 'Bar chart dataset',
    data: [45, 49,52, 48],
    borderColor: 'rgb(255, 99, 132)',
    backgroundColor: 'rgba(255, 99, 132, 0.2)'
  }, {
    type: 'line',
    label: 'Line chart 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);

Try it »

The output result of the above example is:

Other extensions