コンテンツにスキップ

Top

vue-chartjs で fill が 機能しない

グラフ表示をするときに便利なChart.js というライブラリがあるが、Vue で使うのであれば vue-chartjs という便利ライブラリがあるのでこれを使ったほうが良い。

で、実際にグラフが出るのを確認したが、Area Chart(線グラフの内側を塗りつぶすグラフ)の設定が有効にならない。
fill や propagate の設定をしても何も塗りつぶされないのだ。
困ったので調べた。

Filler の import と register をしろ!

fill : 'origin' とか いろいろ設定してもうまくいかなかった理由は Filler を import していなかったせい。

import { Chart as ChartJS, Title, Tooltip, Legend, PointElement, LineElement, CategoryScale, LinearScale, Filler } from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler);

と、 Filler を import して register にも追加すれば有効になった!

やったね!