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 にも追加すれば有効になった!
やったね!