Mixed Chart Types

With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset.

Creating a mixed chart starts with the initialization of a basic chart.

  1. var myChart = new Chart(ctx, {
  2.   type: 'bar',
  3.   data: data,
  4.   options: options
  5. });

At this point we have a standard bar chart. Now we need to convert one of the datasets to a line dataset.

  1. var mixedChart = new Chart(ctx, {
  2.   type: 'bar',
  3.   data: {
  4.     datasets: [{
  5.           label: 'Bar Dataset',
  6.           data: [10, 20, 30, 40]
  7.         }, {
  8.           label: 'Line Dataset',
  9.           data: [50, 50, 50, 50],
  11.           // Changes this dataset to become a line
  12.           type: 'line'
  13.         }],
  14.     labels: ['January', 'February', 'March', 'April']
  15.   },
  16.   options: options
  17. });

At this point we have a chart rendering how we'd like. It's important to note that the default options for a line chart are not merged in this case. Only the options for the default type are merged in. In this case, that means that the default options for a bar chart are merged because that is the type specified by the type field.