[JavaScript]chart.jsで積み上げグラフを描画

やりたいこと

積み上げグラフはstack:オプションを同じ値に設定すれば簡単に描けるが、今回やりたいのは

• データa、bがある

• bはaの一部である

• aに対するbの割合をグラフで表したい

もちろん、bとa-bを通常の積み上げグラフにしてもいいが、a-bがさほど重要でない場合、つまりaに対するbの割合にフォーカスしたい場合は、aとbとの下端を揃えた棒グラフを描画したい

やり方

beginAtZero: trueを設定すればよい

return new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["Graph"],
        datasets: [
          {
            label: "a",
            data: [a],
            backgroundColor: 'salmon',
          },        
          {
            label: "b",
            data: [b],
            backgroundColor: 'dodgerblue',
          },  
        ]
      },
      options: {
        scales: {
          x: {
            stacked: true,
          },
          y: {
            beginAtZero: true,
          },
        },
      },
    })

下記のようなグラフが描画できる