今日、Next.jsのWebサイトでチャートが必要になり、チャートで一番人気のありそうなライブラリ『Recharts』をインストールしました。

エラー発生

公式の例のコードを参考に書いたら、以下のエラーが発生しました。

たまに見るやつです。色々試した結果、コンポーネントの引数の値をそのまま使わずに、useEffectの中で別の変数に代入してそれを使ったら、このエラーは解消されました。

わけのわからないエラー発生

このエラーは検索してもよくわからず、解決できませんでした。簡単な棒グラフを表示させたいだけなのに…。

react-chartjs-2に乗り換えて3分で解決

Rechartsのエラーと数時間格闘した後、ギブアップして2番目に人気のありそうな『react-chartjs-2』を試してみました。インストールしてから3分で、自分が表示させたい棒グラフを表示させることができました。上記の "Hydration failed" のエラーも出ませんでした。最初からこっちを選べば良かったんや…。ツールチップの表示もこっちの方が良い感じ。