Recharts / Nivo / Chart.js / ApexCharts を徹底比較
どれを選ぶべきか、特徴と向いている用途を総まとめ
React でグラフを描画する際に候補に挙がる 4 ライブラリ：
- Recharts
- Nivo
- Chart.js（react-chartjs-2）
- ApexCharts（react-apexcharts）
この記事では、それぞれの単独編を踏まえて
「結局どれを選べばいいのか？」
を用途別にまとめて解説します。
📌 まず結論：4 ライブラリのポジションまとめ
| ライブラリ | 一言まとめ | 得意な領域 |
|---|---|---|
| Recharts | React 的で書きやすい構成型チャート | 複合チャート・管理画面 |
| Nivo | デザイン最強・世界観の表現が強い | デザイン重視の UI |
| Chart.js | 最も定番・情報量が圧倒的 | 定番グラフ・教育系・小規模 |
| ApexCharts | インタラクション最強 | ダッシュボード・BI |
🔍 各ライブラリの観点別比較
1. React との相性
| ライブラリ | React-first? | コメント |
|---|---|---|
| Recharts | ◎ | もっとも React 的で扱いやすい |
| Nivo | ○ | コンポーネント化されていてわかりやすい |
| Chart.js | △ | ラッパー必須、Imperative ベース |
| ApexCharts | △ | React ラッパー使用＋SSR 非対応 |
2. デザイン性の高さ
| ライブラリ | 美しさ | コメント |
|---|---|---|
| Nivo | ★★★★★ | グラデ・アニメーション・テーマ最強 |
| Recharts | ★★★☆☆ | 素直で調整しやすい |
| ApexCharts | ★★★★☆ | ダッシュボード向きに強い |
| Chart.js | ★★★☆☆ | 設定次第で整う |
3. 複雑構成（複合チャート・複数軸など）
| ライブラリ | 複雑チャート | コメント |
|---|---|---|
| ApexCharts | ★★★★★ | 複数 Y 軸／棒＋線などが超得意 |
| Recharts | ★★★★☆ | 合成しやすい |
| Chart.js | ★★★★☆ | プラグイン含め十分対応可 |
| Nivo | ★★★☆☆ | できるが難易度は高め |
4. インタラクティブ性（操作できるグラフ）
| ライブラリ | 操作性 | コメント |
|---|---|---|
| ApexCharts | ★★★★★ | ズーム／パン標準搭載 |
| Chart.js | ★★★★☆ | plugin で強化可 |
| Nivo | ★★★☆☆ | スライス・クロスヘアが強い |
| Recharts | ★★☆☆☆ | 最低限のみ |
5. 学習コスト
| ライブラリ | 難易度 | コメント |
|---|---|---|
| Recharts | ★★☆☆☆ | JSX 合成で直感的 |
| Nivo | ★★★☆☆ | デザイン設定が多め |
| Chart.js | ★★★☆☆ | options の構造を理解すれば強い |
| ApexCharts | ★★★★☆ | 設定量が多い＋SSR 注意 |
🎯 用途別に「どれを選ぶか？」
【1】UIデザイン重視 → Nivo
- アニメーション／世界観を作りたい
- ダークテーマとの相性を重視したい
- プロダクト全体のブランド感を出したい
Nivo は デザインと表現力で圧倒的最強。
【2】管理画面・業務 UI → Recharts
- 折れ線＋棒＋エリアなど複合表示が多い
- React 的に扱いたい
- メンテしやすい構造を優先したい
もっとも “実務的で扱いやすい” のが Recharts。
【3】定番グラフをまず描きたい → Chart.js
- とりあえずグラフが必要
- 教材・サンプル・初心者学習
- StackOverflow を頼りにしたい
情報量で No.1。迷ったら Chart.js の安心感。
【4】インタラクティブ性を最重要 → ApexCharts
- ズーム／パン／範囲選択が必須
- 複数 Y 軸やミックスチャートが多い
- BI ダッシュボード向け UI を作りたい
ApexCharts は 「触って気持ちいいグラフ」 を作れる。
📂 プロジェクト規模 × 推奨ライブラリ
| 規模 | オススメ |
|---|---|
| 小規模・個人開発 | Chart.js / Recharts |
| 中規模の SaaS | Recharts / ApexCharts |
| デザイン重視アプリ | Nivo |
| 高機能ダッシュボード | ApexCharts |
📌 最終まとめ
| ライブラリ | 得意分野 |
|---|---|
| Recharts | React 的で複合チャートの表現が強い |
| Nivo | デザイン・世界観・アニメーション最強 |
| Chart.js | 定番・情報豊富・プラグインが強い |
| ApexCharts | インタラクティブ操作 & ダッシュボード最強 |
📝 結論
- UI デザイン → Nivo
- React 的に書きたい → Recharts
- まず手軽に定番グラフ → Chart.js
- インタラクティブ性重視 → ApexCharts
4 ライブラリを理解すると、
あなたのプロジェクトに合った “ベストな選択” が自然にできるようになります。
📚 このシリーズの構成
-
Recharts 編（公開済み）
👉 https://qiita.com/kz2021019/items/53a3d302962fa48ed6f3 -
Nivo 編（公開済み）
👉 https://qiita.com/kz2021019/items/67c3bd727a1eb35e8c4c -
Chart.js 編（公開済み）
👉 https://qiita.com/kz2021019/items/d33a644bd4c48fbfa29e -
ApexCharts 編（公開済み）
👉 https://qiita.com/kz2021019/items/07ce194201bf5c90a041 -
4 ライブラリ比較まとめ編（本記事）
プロダクト開発で「グラフ選定の迷い」を解消できる内容になっています。