Chart.jsで帯グラフ(100%積み上げ棒グラフ)を描画する - Qiita

JavaScriptのグラフ描画ライブラリであるChart.js(v2.5.0)では、帯グラフ(100%積み上げ棒グラフ)を描画することはできません。純粋な積み上げ棒グラフはオプションで指定できますが、比率をグラフ化したかったのです。 幸いなことにChart.jsは簡単にpluginが書けるので、作ってみました。以下のようになります。 セットアップ ここに書いているので、最初にプラグインをChart.jsに登録してください。 使い方 chart optionsに { stacked: '100%' } を渡すだけです。 new Chart(document.getElementById('stage'), { type: 'horizontalBar', data: { labels: ["Foo", "Bar"], datasets: [ { label: "bad", data: [5