データの可視化・グラフ
データを視覚的に表現するためのUI要素やグラフライブラリの探求
このページでわかること
- 棒グラフ・線グラフ・円グラフから、サンキーダイアグラム・ガントチャート・ヒートマップ・バイオリンプロットまで、20種類以上のチャートの違いと使い分け
- Recharts・Nivo・ECharts・Plotly・Chart.js・ApexCharts・D3 など主要可視化ライブラリの実装比較
- データ型（時系列・カテゴリ・階層・分布）・データ規模・インタラクティブ性によるライブラリ選定基準
- SSR対応・レスポンシブ・アクセシビリティなど実装時の落とし穴
データ可視化UIとは
データ可視化は、数値や関係性を視覚化し、人が直感的に理解できる形で伝えるUI領域。表で見るより、グラフで見た方が傾向・異常・比較を素早く把握できる。
Reactエコシステムには、Recharts（コンポーネント指向）、Nivo（D3ベースの美麗さ）、ECharts/Plotly（多機能・科学系）、Chart.js（Canvas・軽量）、ApexCharts（モダンな見た目）、D3.js（完全カスタム）など多様な選択肢があり、データの性質と表現の要求度で選び分ける。
本ページでは、20種類以上のチャートを取り上げ、各ライブラリの実装と適性を比較する。
目的別の選び方
チャート種別
| やりたいこと | 推奨チャート | 代替 |
|---|---|---|
| 数量の比較 | 棒グラフ・積み上げ棒 | ドーナツ・ピラミッド |
| 時系列の推移 | 線・エリア・ローソク足 | 棒（離散） |
| 構成比 | 円・ドーナツ・ツリーマップ | 積み上げ棒 |
| 相関関係 | 散布図・バブル | ヒートマップ |
| 分布 | ヒストグラム・箱ひげ・バイオリン | ヒートマップ |
| 流れ・遷移 | サンキー・ファネル | フローチャート |
| 多次元比較 | レーダー・パラレル座標 | スターチャート |
| 地理データ | コロプレス（人口地図） | バブル地図 |
| スケジュール | ガント | タイムライン |
ライブラリ選定
| 条件 | 推奨ライブラリ |
|---|---|
| 素早く綺麗に組み立てたい | Recharts |
| デザインの美しさ重視 | Nivo |
| 機能・チャート種類の豊富さ | ECharts / Plotly |
| バンドルサイズを抑えたい | Chart.js（Canvas） |
| 統計系・科学系 | Plotly |
| モダンUIで多機能 | ApexCharts |
| 完全カスタムが必要 | D3.js |
棒グラフ（Bar Chart）
詳細を見る →カテゴリー別のデータ比較に最適な基本的なグラフ形式
積み上げ棒グラフ（Stacked Bar Chart）
詳細を見る →複数系列のデータを積み上げて合計と内訳を同時に把握できるグラフ形式
折れ線グラフ（Line Chart）
詳細を見る →時系列データの推移や傾向を示すのに効果的
エリアチャート（Area Chart）
詳細を見る →時系列データの量や推移を塗りつぶしで視覚的に強調する表現
円グラフ（Pie Chart）
詳細を見る →全体に対する各部分の割合を視覚的に表現
散布図（Scatter Chart）
詳細を見る →2つの変数の相関関係やデータの分布パターンを視覚化
バブルチャート（Bubble Chart）
詳細を見る →3つの数値変数の関係をX軸・Y軸・バブルサイズで同時に可視化する散布図の拡張形式
ヒートマップ（Heatmap）
詳細を見る →2次元データの密度や強度を色の濃淡で視覚的に表現
レーダーチャート（Radar Chart）
詳細を見る →複数の指標を放射状に配置し、多軸データのバランスや比較を視覚化
複合グラフ（Composed Chart）
詳細を見る →棒グラフと折れ線グラフを組み合わせ、異なるスケールのデータを一画面で比較
ゲージ／ラジアルバーチャート（Radial Bar Chart）
詳細を見る →進捗率やKPIを円形メーターで表示し、達成状況を直感的に可視化
ファンネルチャート（Funnel Chart）
詳細を見る →コンバージョンフローの各ステージの通過率を視覚化し、離脱ポイントを把握
ツリーマップ（Treemap）
詳細を見る →階層データの構成比を面積で表示し、全体のシェアを直感的に把握
カレンダーヒートマップ（Calendar Heatmap）
詳細を見る →GitHubの草のように日別データをカレンダー形式の色の濃淡で表現
ウォーターフォールチャート（Waterfall Chart）
詳細を見る →収益・コストの増減を段階的に表示し、最終的な損益の内訳を視覚的に把握
ボックスプロット（Box Plot）
詳細を見る →データの分布・中央値・四分位数・外れ値をグループ間で比較する統計グラフ
バイオリンプロット（Violin Plot）
詳細を見る →データの分布形状を視覚化するチャート。ボックスプロットより詳細な分布の形状（密度）を確認できる。
サンキーダイアグラム（Sankey Diagram）
詳細を見る →フローや流れ・変遷を矢印の太さで量を表現し、データの流れを可視化
ネットワークグラフ（Network Graph）
詳細を見る →ノード間の関係性や接続強度をフォースシミュレーションで可視化するグラフ形式
パラレル座標（Parallel Coordinates）
詳細を見る →複数の変量を持つデータを平行軸上に描画し、多次元データのパターンや相関を視覚化
人口分布マップチャート（Population Map）
詳細を見る →地理的な位置情報と人口データをバブルマップで可視化し分布を表現
ローソク足チャート（Candlestick Chart）
詳細を見る →株価などのOHLC（始値・高値・安値・終値）データを可視化するチャート。金融・トレード系ダッシュボードで広く使われる。
ガントチャート（Gantt Chart）
詳細を見る →プロジェクトのタスクと期間を時系列で可視化するチャート。スケジュール管理・進捗確認に活用される。
ゲージチャート（Gauge Chart）
詳細を見る →KPIや使用率などの単一指標を視覚的に表示するチャート。ダッシュボードの進捗・状態表示に広く使われる。
実装の落とし穴
- SSR非対応: Plotly.js・ApexCharts・ECharts は SSR非対応のため
next/dynamic({ ssr: false })必須 - レスポンシブ: 親要素の幅をJSで取得するライブラリが多く、SSRや初期レンダリングで0幅になりがち。
ResponsiveContainerやResizeObserver対応を確認する - アクセシビリティ: SVG ベースのライブラリ（Recharts・Nivo）は
aria-labelを手動付与する必要あり。スクリーンリーダー対応は別途検討 - データ更新時の再描画コスト: 大量データではメモ化（useMemo / React.memo）を併用、Canvas 系（Chart.js）はSVG 系より高速
よくある質問
Recharts と ECharts どっちを選ぶ？
シンプルな数種類のチャートで足りるなら Recharts（React的なAPI、軽量、学習コスト低）。複雑なダッシュボードや多様なチャートが必要なら ECharts（機能豊富、JSON設定で柔軟）。両方使うプロジェクトも珍しくない。
Chart.js と SVGベースのライブラリの違いは？
Chart.js は Canvas にレンダリングするため大量データに強く、バンドルサイズも小さい。一方 Recharts/Nivo などは SVG ベースで、各要素にCSS/イベントを直接付けられる柔軟さがある。表現の細かさと性能のトレードオフ。
D3.js は必要？
ライブラリで実現できない独自表現を作る場合のみ推奨。学習コストが高く、Reactとの統合も自前で書く必要があるため、まずは Recharts や Nivo（内部で D3 を使用）で要件を満たせないか確認するのが安全。
SSR でチャートが表示されない
next/dynamic で { ssr: false } を指定する。Plotly・ApexCharts・ECharts のクライアント専用ライブラリは特に必須。Recharts は SSR 対応だが、ResponsiveContainer の初期幅が0になりやすいので注意。
Zenn