3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Chart.js】プラグインchartjs-plugin-colorschemesが反映されない件

Posted at

目的

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.jsreact-chartjs-2をv2系にバージョンダウンさせたところ正常に反映されました!!

まとめ

Chart.jsの2系と3系の違いは結構あるっぽいので注意が必要ですね。。。。
https://www.chartjs.org/docs/latest/getting-started/v3-migration.html

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?