目的
Chart.jsでchartjs-plugin-colorschemesを使う際にハマってしまったのでその備忘録になります。
結論言うとchartjs-plugin-colorschemesはChart.jsのバージョン2系までしか動作しないようです。
環境
react: "^17.0.2",
typescript: "~4.1.5"
chart.js: 3.x.x
react-chartjs-2: 3.x.x
chartjs-plugin-colorschemes: "^0.4.0",
chartjs-plugin-colorschemesについて
簡単な紹介です。
Chart.jsを使う人はご存知かと思いますが、グラフを描画する際にグラフ一つひとつの色を、プログラムで指定しなければいけません。
そこで自動でいい感じに色を付けてくれるのがchartjs-plugin-colorschemesです。
自動といってもある程度パターンは指定できるので、詳しくは公式サイトを確認してください。
公式サイト
https://nagix.github.io/chartjs-plugin-colorschemes/
注意点
私の場合、TypeScriptで使いたかったため下記コマンドでchartjs-plugin-colorschemes
をインストール
npm install chartjs-plugin-colorschemes --save
npm install --save-dev @types/chartjs-plugin-colorschemes
しかしコードに組み込んでも色が反映されませんでした。
調べたところchartjs-plugin-colorschemes
はChart.jsのバージョンはv2.9.4まで対応とのことでした。Chart.JS v3系は未対応っぽいです。
https://github.com/nagix/chartjs-plugin-colorschemes/issues/28
chart.js
とreact-chartjs-2
をv2系にバージョンダウンさせたところ正常に反映されました!!
まとめ
Chart.jsの2系と3系の違いは結構あるっぽいので注意が必要ですね。。。。
https://www.chartjs.org/docs/latest/getting-started/v3-migration.html