Learn Chart.js

Mixed charts

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: ...