「React で使えるグラフライブラリ4種を徹底比較してみた」

最近、個人開発の UI を作る中で「グラフ表示」を扱う機会が増えてきました。
そこで今回、React でよく使われる 4 つのグラフライブラリについて、実際に触りながらまとめ記事を書きました。

• Recharts

• Nivo

• Chart.js

• ApexCharts

どれも一度は名前を聞いたことがあるライブラリですが、
実際に触ってみると 「得意分野が全然違う」 ことがよく分かります。

今回の記事では、各ライブラリごとに

• シンプルな構成（最小構成）

• “ゴリゴリ”に機能を盛った構成（強みを活かした例）

という 2 パターンのグラフを作成しながら比較 しています。

実装しながら気づいたこととして、例えば：

• Recharts は React のコンポーネント構成で組み立てるところが強く、複合チャートが自然に書ける

• Nivo は デフォルトが綺麗すぎるレベルで、テーマ・アニメーション・グラデーションが強力

• Chart.js は 学習コストが低く、設定オブジェクトで直感的に作れる

• ApexCharts は インタラクション（ホバー、ズーム、パン）がダッシュボード向けにかなり強い

といった具合で、使う場面によって “向き不向き” がはっきりしています。

今回のシリーズでは、1 ライブラリごとに丁寧に解説した記事と、
最後に 4 種まとめ比較編 も書いています。

これから「ダッシュボードを作りたい」「React でどのグラフライブラリが合うか迷っている」という仲間がいたら、ぜひ参考にしてもらえたら嬉しいです。

📚 シリーズ記事一覧

1. Recharts 編（公開済み）
   👉 https://qiita.com/kz2021019/items/53a3d302962fa48ed6f3

2. Nivo 編（公開済み）
   👉 https://qiita.com/kz2021019/items/67c3bd727a1eb35e8c4c

3. Chart.js 編（公開済み）
   👉 https://qiita.com/kz2021019/items/d33a644bd4c48fbfa29e

4. ApexCharts 編（公開済み）
   👉 https://qiita.com/kz2021019/items/07ce194201bf5c90a041

5. 4 ライブラリ比較まとめ編（公開済み）

   👉 https://qiita.com/kz2021019/items/1b41f5e805920f37e0d4