chart.jsを使って下図のグラフのように棒グラフを積み重ねて表示する方法を紹介します。図はローンの返済シミュレーショングラフのサンプルで、濃い青のグラフ（元本）の上に薄い青の棒グラフ（利子）を重ねて毎月の支払額の内訳と合計を表現しています。

グラフを積み重ねるためにはxAxesとyAxesのstackedオプションをtrueにする

こういったグラフの積み重ねをchart.jsで行うためには、optionsのｘAxesとyAxesのstackedオプションをtrueにする必要があります。このオプションを設定することで、datasets内の各データセットが積み重なる形でグラフに表示されます。

以下がサンプルコードになります。

chart = new Chart(ctx, {
 type: 'bar',
 data: {
  labels: [1,2,3,...], //x軸のデータセット
  datasets: [{
   label: '支払元本',
   data: [xxx,xxx,xxx,...], //y軸のデータセット1
   backgroundColor: "rgba(54,264,235,0.8)" //グラフの色(各データセットで違う色にする)
  },{
   label: '支払利子',
   data: [xxx,xxx,xxx,...], //y軸のデータセット2(データセット1の上に積み重なる)
   backgroundColor: "rgba(54,264,235,0.4)" //グラフの色(各データセットで違う色にする)
  }]
 },
 options: {
  responsive: true,
  scales: {
   xAxes:[{
    stacked: true, //グラフを積み重ねるにはこれが必要
    scaleLabel:{
     display: true,
     labelString: "年"
    }
   }],
   yAxes: [{
    stacked: true, //グラフを積み重ねるにはこれが必要
    ticks: {
     beginAtZero:true,
    },
    scaleLabel:{
     display: true,
     labelString: "返済額"
    }
   }]
  }
 }
});