Mixed charts are charts of different types that share the same axes. A typical example is to overlay a bar chart with one or more line charts. In Chart.js, this is achieved simply by adding a different type property in one or more datasets.

In the following example (Multiple/ multiple-2-mixed.html), a bar chart is used to display a set of values and a line chart is used to show the accumulated average:

const values = [12, 33, 42, 67, 90, 56, 51, 78, 95, 101, 120, 140];
const averages = [];
for(let i = 0; i < values.length; i++) {
     averages[i] = values.slice(0,i+1).reduce((a,b)=>a+b,0)/(i+1);
 }
 
 new Chart("myChart", {
     type: 'bar',
     data: {
         labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul',
                  'Aug','Sep','Oct','Nov','Dec'],
         datasets: [{
             type: 'line',
             label: 'Line dataset (average)',
             data: averages,
             borderColor: 'red',
             fill: false
         },{
             label: 'Bar dataset (totals)',
             data: values,
             borderColor: 'blue',
             backgroundColor: 'rgba(0,0,120,.6)'
         }]
     }
 })

Since bar is the default type, it doesn’t need a type property. There could also be additional datasets for each type.

The result is as follows: