Reactでグラフ描画(react-chartjs-2)

背景

reactでグラフを描きたくなりまして、いくつかmoduleがあるのですが、一番人気がありそうなreact-chartjs-2を選択しました。
参考記事を参照してサンプルコードをそのまま走らせてもうまくできなかったので、備忘録代わりに投稿します。

環境

• Macbook Air (M1, 2020)
• Docker 20.10.16
• Docker Compose 2.5.1
• node v18.7.0
• react 18.1.0
• react-dom 18.1.0
• chart.js 3.9.1
• react-chartjs-2 4.3.1

コンテナで作業しています。

参考記事の検証

参考記事は腐るほどみつかります。

でも、コピペして実行してみるとブラウザには真っ白な画面。デベロッパーツールでなにやらエラーがたくさん。はてはて

解決方法

エラーメッセージの「Uncaught Error: "category" is not a registered scale」でgoogle検索してみると見つかりました。

結果、こちらの二行を追記することで解消。

import { Chart, registerables } from "chart.js"
Chart.register(...registerables)

こんな感じになりました。めでたしめでたし。