Rechartsとは？機能・導入・制約

ページ内ナビ

概要

RechartsはReactとD3を土台に、LineChart、BarChart、XAxis、Tooltip、Legendなどを独立したコンポーネントとして組み合わせるグラフライブラリです。データ配列とdataKeyをpropsで渡し、Reactの描画モデルの中で折れ線、棒、面、円、散布図などを構築できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-04

主な特徴

扱える処理

軸、グリッド、ツールチップ、凡例、系列を個別のReactコンポーネントとして配置し、JSXの階層でグラフ構成を読み取れます。

ResponsiveContainerで親要素に追従させ、折れ線、棒、面、円、レーダー、散布図などを共通のpropsとイベント処理で扱えます。

出典：[1]

向いている用途

適する用途

Reactアプリで、業務指標や時系列データを既存の状態管理・コンポーネント設計に沿って可視化し、SVG要素や各系列を細かく調整したい場合に向きます。

出典：[1]

導入前の確認

導入前に確認する点

3.10.1はNode.js 18以上を要求し、React、React DOM、react-isをピア依存関係とします。react-isは利用中のReactと同じメジャー版へ揃えてください。大量点の描画、応答性、アクセシビリティ、サーバー描画時の寸法は実データで検証が必要です。

出典：[1][2][3]

参考にした公式資料

[1]Recharts v3.10.1 README(2026-10-04)
[2]Recharts v3.10.1 release(2026-10-04)
[3]Recharts v3.10.1 package/build metadata(2026-10-04)
[4]Recharts v3.10.1 license(2026-10-04)

編集部からの補足

D3の低レベルAPIを直接組み立てず、Reactコンポーネントとして軸や系列を構成できる点が中心です。固定版のリポジトリで単体テストを実行し、Reactとreact-isの版を揃えて評価してください。

3ステップで試す

1
3.10.1を取得
確認した安定版を専用ディレクトリーへ固定します。
git clone --branch v3.10.1 --depth 1 https://github.com/recharts/recharts.git recharts-3.10.1
2
固定された依存関係を導入
この手順で作業ディレクトリーへ移動し、Node.js 18以上とpackage-lock.jsonに固定された依存関係を使います。
cd recharts-3.10.1 && node --version && npm ci
3
単体テストを一回実行
同じ作業ディレクトリーのまま、vitest runでコンポーネント、状態処理、描画ロジックを検証します。
npm test

公式READMEで確認

成長

成長の推移 · 直近30日

27,613 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 124
Open PR: 48

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

react
charting-library
recharts
d3
chart
components
javascript
ui
data-visualisation
typescript

Stars: 27,613
Forks: 1,998
Watchers: 184
Open Issues: 405
Contributors: 412
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/10/04