--- title: "Rechartsとは？3.10系の導入コードとSVG描画の限界・Chart.jsとの選び分け" url: "https://www.issoh.co.jp/tech/details/19050/" published: 2026-10-29 updated: 2026-10-29 categories: ["開発"] publisher: "株式会社一創" --- # Rechartsとは？3.10系の導入コードとSVG描画の限界・Chart.jsとの選び分け Rechartsは、Reactのコンポーネントを組み合わせてSVGのグラフを描くライブラリで、MITライセンスで配布されています。2026年10月29日にnpm registryで確認した最新版は3.10.1（2026年7月25日公開）でした。この記事では、3系で入れ替わった内部構成と配布サイズの実測値、3.3で加わった`responsive`指定を使う導入コード、点数が増えたときに画面を重くしない書き方、2系から3系への移行で止まりやすい箇所を順に扱います。後半では、Chart.js・ECharts・BIツールとの選び分けを採用条件として言い切ります。Reactで管理画面や会員向けダッシュボードを作る開発者と、その技術選定を任された担当者に向けた内容です。 ## まとめ：Rechartsで作る画面と別のグラフ部品へ切り替える画面の分かれ目 Rechartsが合うのは、Reactで作る業務画面に、折れ線・棒・面・円といった標準的なグラフを置き、凡例やツールチップの見た目を自社のUIに合わせたい案件です。軸もツールチップもJSXの子要素として書くため、画面のほかの部品と同じ書き方で組めます。ReactとSVGの知識だけで中身を追えるのも、保守を引き継ぐ側には助かる点です。 見送るべき条件もはっきりしています。数万点を超える系列をそのまま描く画面、1秒未満の間隔で更新し続ける監視画面、React以外のフレームワークが混在する画面群。この3つはCanvasで描くChart.jsやEChartsの領域です。版は3.10系を選び、2系前提の記事のコードは[公式の3.0移行ガイド](https://github.com/recharts/recharts/wiki/3.0-migration-guide)と照らしてから流用してください。 ## Rechartsの定義と3系で入れ替わった内部構成・依存パッケージと配布サイズ RechartsはReact専用のグラフライブラリです。グラフの種類ごとに`LineChart`や`BarChart`といった親コンポーネントがあり、その中に`XAxis`・`Tooltip`・`Line`などを並べて1枚のグラフを組み立てます。 ### SVG描画とコンポーネント合成がもたらす装飾の自由と描画コスト 描画結果はSVGです。線1本、棒1本、目盛り1つがそれぞれDOM要素になるため、CSSでの装飾や、開発者ツールでの要素の確認がそのまま効きます。棒の形を変えたいときは`shape`に自作のコンポーネントを渡せます。 代わりに、点や棒の数がそのままDOM要素の数になります。Canvasに塗るChart.jsは点が増えてもDOMは増えません。この差が、次章以降で扱う大量データの限界と、選び分けの軸そのものです。 ### npm実測で見る3.10.1の公開日と11個の依存パッケージ [npm registryの記録](https://registry.npmjs.org/recharts)では、3.0.0が2025年6月23日、3.4.0が同年11月10日、3.10.0が2026年7月20日、3.10.1が同年7月25日に公開されています。2系の最終版は2.15.4（2025年6月20日）です。2026年10月時点では、テーマ機能を試す3.11.0のcanary版が出ている段階でした。 3.10.1の実行時依存として含まれるパッケージは11個です。目を引くのは`@reduxjs/toolkit`と`react-redux`で、3系は内部の状態管理をReduxの仕組みで書き直しています。D3由来のスケールや線形状の計算は`victory-vendor`経由で取り込んでいます。アプリ側でReduxを使っていなくても、これらはRechartsの内部に閉じて動くので設定は要りません。Reduxそのものの仕組みは[Redux Toolkitの実装と採用判断](https://www.issoh.co.jp/tech/details/16013/)で扱っています。 ### UMD版593,114バイトとgzip後約155.5KBという配信サイズの実測値 2026年10月29日にjsDelivrから3.10.1の`umd/Recharts.js`を取得したところ、593,114バイトでした。gzipの圧縮レベル9で固めると約155.5KBです。兄弟記事の[Chart.jsの導入コードと大量データの限界](https://www.issoh.co.jp/tech/details/18667/)で測ったChart.js 4.5.1のUMD版は208,522バイト、gzip後約70.8KBでした。 この数字は全部入りのファイルでの比較です。npmパッケージは`sideEffects: false`を宣言し、ESM版の`es6`ディレクトリを持つため、バンドラは使っていないコンポーネントを削れます。それでもReduxまわりの依存は削れないので、グラフ1枚だけのために入れると割高になります。 ## Reactにインストールしてresponsive指定で最初の折れ線グラフを描くまでの手順 ここからは、Viteなどで作ったReactプロジェクトがある前提で進めます。土台の作り方は[Vite + Reactの環境構築手順](https://www.issoh.co.jp/tech/details/3587/)を参照してください。 ### npm導入時の前提条件：React 16.8〜19・TypeScript 5以上 インストールは1行です。`react-is`は3系でもpeer依存に残っているため、npmの7以降なら自動で入ります。 ``` npm install recharts@3 ``` 移行ガイドが挙げる3系の最低条件は、React 16.8以上、TypeScript 5以上、Node.js 18以上の3点です。出力のターゲットはES6に上がり、ES5向けのポリフィルは外されました。古いブラウザ向けに変換をかけている案件では、この点を先に確かめます。 ### 折れ線グラフの高さ指定：responsiveとstyleのaspectRatio [公式のChart sizeガイド](https://recharts.github.io/en-US/guide/sizes/)は、サイズを持たないグラフは何も描画しないと明記しています。3.3で加わった`responsive`を付け、`style`に幅と縦横比を書くのが今の基本形です。[Getting Started](https://recharts.github.io/en-US/guide/getting-started/)の例も同じ書き方をしています。 ``` // OrdersChart.tsx：月次の受注件数と問い合わせ件数を折れ線で並べる import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts'; type Row = { month: string; orders: number; inquiries: number }; const data: Row[] = [ { month: '4月', orders: 12, inquiries: 31 }, { month: '5月', orders: 19, inquiries: 42 }, { month: '6月', orders: 15, inquiries: 36 }, { month: '7月', orders: 23, inquiries: 48 }, ]; export default function OrdersChart() { return ( ); } ``` `dataKey`には配列の要素のプロパティ名を文字列で渡します。`YAxis`の`width="auto"`は3.0で入った指定で、目盛りの桁数に合わせて軸の幅を自動で取ります。以前は桁の大きい値で目盛りが欠けるたびに`margin`を手で広げていました。 ### 3.3より前の版で使うResponsiveContainerと親要素の高さ指定 3.2以前の版を使い続ける案件では、`responsive`は使えません。従来どおり`ResponsiveContainer`で包みます。このとき親要素に高さが無いと、グラフは高さ0で何も見えなくなります。 ```
``` 公式ガイドは、`ResponsiveContainer`は`responsive`ほど柔軟ではないと説明しています。3.3以上へ上げられるなら、包む書き方はやめてグラフ側の指定へ寄せてください。Flexboxの子要素やCSS Gridのセルに置いた場合も、`responsive`なら親の寸法に追従します。 ## 点数が数千を超えたグラフで再描画を抑える間引きとメモ化の実装 SVGで描く以上、点数の増加はそのままDOMの重さになります。[公式のPerformanceガイド](https://recharts.github.io/en-US/guide/performance/)は、まず「5万件の点を本当に全部表示する必要があるか」を問い直すよう勧めています。 ### dataKeyに関数を渡すと全点を再計算する仕組みと参照の固定 見落としやすいのが`dataKey`の書き方です。Performanceガイドによると、`dataKey`に関数を渡し、その参照が描画のたびに変わると、Rechartsは全点を計算し直します。コンポーネントの中に`dataKey={(row) => row.value}`と書くと、親が再描画されるたびにこれが起きます。 対策は優先順に3つです。文字列の`dataKey`を使う、関数ならコンポーネントの外で定義する、どうしても依存値が要るなら`useCallback`で包む。ガイドはこの種の書き方を検出するESLintプラグインとして`eslint-plugin-react-perf`を挙げています。自動メモ化で参照を安定させる手もあり、仕組みは[React Compilerの自動メモ化とuseMemoの違い](https://www.issoh.co.jp/tech/details/9415/)で解説しています。 ### 大量データの描画前に最小値と最大値を残して点数を減らす間引き関数 Chart.jsと違い、Rechartsには描画時に点を間引く機能がありません。点数を減らす処理はアプリ側で書きます。次の関数は、区間ごとに最小値と最大値の2点だけを残す方式です。異常値の山を消さないので、監視系の推移表示でも使えます。 ``` // downsample.ts：区間ごとに最小値と最大値を残し、点数を buckets×2 以下に減らす export type Point = { t: number; value: number }; export function downsample(points: Point[], buckets: number): Point[] { if (points.length <= buckets * 2) return points; const size = Math.ceil(points.length / buckets); const out: Point[] = []; for (let i = 0; i < points.length; i += size) { const slice = points.slice(i, i + size); let min = slice[0]; let max = slice[0]; for (const p of slice) { if (p.value < min.value) min = p; if (p.value > max.value) max = p; } if (min === max) out.push(min); else out.push(...(min.t < max.t ? [min, max] : [max, min])); } return out; } ``` ``` // SensorChart.tsx：間引いた結果を useMemo で保持し、点とアニメーションを切る import { useMemo } from 'react'; import { Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts'; import { downsample, type Point } from './downsample'; const formatTime = (t: number) => new Date(t).toLocaleTimeString('ja-JP'); export function SensorChart({ points }: { points: Point[] }) { const view = useMemo(() => downsample(points, 400), [points]); return ( ); } ``` 400区間なら描く点は最大800点です。`dot={false}`で点の円を描かないだけでも、SVG要素は点の数だけ減ります。`formatTime`をコンポーネントの外に置いているのは、前の節で触れた参照の固定のためです。 ### ツールチップ更新の間引きとisAnimationActiveの既定値auto マウス移動のたびに状態を更新する実装も重さの原因になります。Performanceガイドの例は、`es-toolkit`の`throttle`で更新を50ミリ秒に1回へ絞っていました。100ミリ秒未満なら利用者には即時に感じられる、というのがガイドの説明です。 アニメーションは[Animationガイド](https://recharts.github.io/en-US/guide/animations/)にあるとおり、ほとんどの部品で`isAnimationActive`の既定値が`'auto'`です。OSの設定で視差効果を減らしている利用者には、自動で再生しません。データを頻繁に差し替える画面では、`false`を明示して毎回の再生を止めます。描画負荷を減らす調整の前後は、React DevToolsのProfilerで描画時間を同じデータ条件で測って比べてください。 ## 2系の記事やコードを3系へ移すときに止まる箇所と移行後の確認手順 検索で見つかるRechartsの記事は、2系を前提にしたものがまだ多い状況です。3.0で状態管理を書き直したため、内部の状態に触れていたコードはそのままでは動きません。 ### CategoricalChartState廃止後の状態参照と描画指定の移行 移行ガイドが最大の変更として挙げるのが、`CategoricalChartState`の廃止です。2系では`Customized`の中の部品やマウスイベントの引数に内部状態が丸ごと渡っていましたが、3系では渡りません。必要な値はRechartsが用意するフックで取得します。 3系ではグラフの子に自作コンポーネントをそのまま置けるようになり、`Customized`で包む必要もなくなりました。棒や扇形を強調する`activeIndex`は削除されたため、`Tooltip`側の指定で同じ表示を作ります。自作ツールチップの型は`TooltipProps`から`TooltipContentProps`へ変わっています。 ### accessibilityLayerの既定値trueと重なり順・凡例順の変化 見た目が変わる変更も3つあります。1つ目は`accessibilityLayer`の既定値が`false`から`true`になった点で、キーボードでの操作とアクセシビリティ属性が最初から有効です。キーボード入力では`onMouseMove`が呼ばれなくなったので、マウス前提の処理は見直します。 2つ目は要素の重なり順です。3.0〜3.3では描画順で決まり、3.4で[zIndexの仕組み](https://recharts.github.io/en-US/guide/zIndex/)が入りました。ツールチップが線の下に隠れるといった症状は、3.4以上へ上げて`zIndex`を指定すれば直せます。3つ目は凡例の並び順で、既定が変わった可能性があるため、`Legend`の`itemSorter`で順序を固定します。 ### 4.0での削除が予告されたCellからshapeへの書き換え 棒ごとに色を変える定番の書き方だった`Cell`は非推奨になりました。[公式のCell移行ガイド](https://recharts.github.io/en-US/guide/cell/)は、Recharts 4.0で削除すると予告しています。 置き換え先は`Bar`や`Pie`の`shape`で、受け取った`props.index`を使って色を決めるコンポーネントを渡します。今は動いているコードでも、4.0に上げる時点で一斉に壊れます。新規の実装では最初から`shape`で書いてください。移行後は、凡例の順序、ツールチップの重なり、キーボード操作の3点を画面で確かめると漏れを防げます。 ## Chart.js・ECharts・BIツールと比べたRechartsの採用条件と見送り場面 選び分けは、描画方式・扱う点数・フレームワーク・誰が操作するか、の4軸で決まります。2026年10月29日時点のnpmの版とあわせて整理します。 ### 描画方式・扱える点数・対応フレームワークで並べた4択の比較表 | 選択肢 | 最新版 | 描画 | 向く点数 | 前提 | | -------- | ----------------- | ---------- | --------- | --------- | | Recharts | 3.10.1（MIT） | SVG | 数百〜数千点 | React専用 | | Chart.js | 4.6.1（MIT） | Canvas | 間引き込みで数万点 | フレームワーク不問 | | ECharts | 6.1.0（Apache-2.0） | Canvas／SVG | 数十万点以上 | フレームワーク不問 | | BIツール | 製品ごと | 製品依存 | 製品依存 | 利用者が組み替え | 「向く点数」は描画方式から見た目安で、計測値ではありません。Chart.jsとEChartsは描画時の間引きや大量データ向けの描画モードを持ち、Rechartsは前章のようにアプリ側で減らす必要があります。この差が点数の目安の差になっています。 ### Rechartsを選んでよい条件とChart.jsやEChartsへ回す条件 Rechartsで決めてよいのは、画面がReactで統一されていて、1系列の点数が間引き後で数千点に収まり、グラフの見た目を他のUI部品と揃えたい案件です。ツールチップをJSXで自由に書け、Tailwind CSSなどのデザインの決まりをそのまま当てられる点は、設定オブジェクトで見た目を指定するChart.jsより扱いやすいところです。 Chart.jsへ回すのは、ReactとVueの画面が混在する、またはReactを使わない静的なページにもグラフを置く場合です。数十万点の更新や地図・サンキー図が要件にあるなら、最初から選ぶ候補は[ECharts](https://www.issoh.co.jp/tech/details/19054/)です。Next.jsのApp Routerで使う場合は、Rechartsの部品をブラウザ側で動かすため、[‘use client’ディレクティブ](https://nextjs.org/docs/app/api-reference/directives/use-client)を書いたクライアントコンポーネントに置きます。サーバー側とブラウザ側の境界の考え方は[App Routerのファイル規約とPages Routerとの違い](https://www.issoh.co.jp/tech/details/4026/)で、描画のずれで起きる警告は[ハイドレーションエラーの原因別の直し方](https://www.issoh.co.jp/tech/details/3218/)で扱っています。 ### グラフを自作せずBIツールで済ませたほうがよい画面の見分け方 判断を誤りやすいのがこの境界です。閲覧者が軸や集計単位、期間を自分で組み替えたい画面を、Rechartsで作り込むのは見送ってください。切り口が1つ増えるたびにAPIと画面の改修が発生し、費用が積み上がります。この用途はBIツールに任せる領域です。 反対に、受注登録の直後に月次の推移を出す、在庫画面に入出庫のグラフを添えるといった、業務の流れの中で決まった指標を見せる画面は、Rechartsで組み込むほうが利用者の手間が減ります。両者の線引きは[予実管理ダッシュボードの作り方とBI・個別開発の判断](https://www.issoh.co.jp/column/details/16445/)でも具体例を交えて扱いました。グラフを含む業務画面をReactで作る案件は、[業務用・Webアプリ開発](https://www.issoh.co.jp/service/apps/business/)で要件整理から相談を受け付けています。 ## Rechartsの導入前に確認されるライセンス・版・周辺連携のよくある質問 導入の検討段階でよく出る質問を5つ取り上げます。 ### Rechartsは商用のWebサービスでも無料で使えますか？ 使えます。Rechartsは[リポジトリのLICENSE](https://github.com/recharts/recharts/blob/main/LICENSE)どおりMITライセンスで、npm registryの3.10.1のメタデータにも`MIT`と記載されています。商用サービスへの組み込みや改変も認められており、条件は著作権表示とライセンス文を含めることです。内部で使うRedux Toolkitも、2026年10月時点の2.13.0はMITライセンスです。バンドル時にライセンスコメントを消さない設定にしておくと、監査で慌てずに済みます。 ### RechartsとChart.jsはどちらを選べばよいですか？ 画面がReactだけで、グラフの見た目を他のUI部品と揃えたいならRechartsです。React以外の画面にも置く、または1系列で数万点を扱うならChart.jsを選んでください。迷う場合は、扱う点数の上限を先に決めます。間引き後でも数千点を超えるなら、SVGで描くRechartsは候補から外れます。両者の配信サイズは、gzip後のUMD版でRechartsが約155.5KB、Chart.jsが約70.8KBでした。 ### ResponsiveContainerはもう使わないほうがよいですか？ 3.3以上なら、グラフ側の`responsive`と`style`で書く方式へ移すのが公式ガイドの推奨です。`ResponsiveContainer`は3系でも使え、すぐに動かなくなるわけではありません。ただし3.0で`ref.current.current`の参照が削除されているため、2系でこの参照を使っていたコードは修正が要ります。新規の画面は`responsive`で書き、既存画面は版を上げる作業のついでに置き換えるのが無理のない順番です。 ### Rechartsで描ける点数に上限はありますか？ ライブラリとしての固定の上限はありません。限界を決めるのは端末の性能と、SVG要素の数です。点の円を描く設定のままだと、1点ごとに要素が増えます。数千点を超えるなら、`dot={false}`とアニメーションの停止に加え、本文の間引き関数のように描画前に点数を減らしてください。日次や時間単位への集計をサーバー側で済ませてから渡す方法が、確実に軽くなります。 ### RechartsをVueやAngularで使うことはできますか？ できません。RechartsはReactのコンポーネントとして作られ、peer依存にReact 16.8〜19を指定しています。Vueの画面でグラフを描くなら、Vue向けのラッパーが保守されているChart.jsやEChartsを選ぶのが近道です。ReactとVueのどちらで画面を作るかがまだ決まっていない段階なら、[ReactとVue 3の違い](https://www.issoh.co.jp/tech/details/2348/)で先にフレームワークを決めてから、グラフの部品を選んでください。 ## 関連記事 - [Chart.jsとは？v4.5の導入コードと大量データの限界・他ライブラリとの選び分け](https://www.issoh.co.jp/tech/details/18667/)：Canvasで描く側の導入コードと間引き設定を確認できます - [BIツールとは？できること・ダッシュボードでの可視化・選定軸を解説](https://www.issoh.co.jp/column/details/12932/)：グラフを自作するかBIを入れるかを決める前提知識です - [経営ダッシュボードとは？指標の決め方・データ連携・構築方式で判断する導入の基準](https://www.issoh.co.jp/column/details/16465/)：グラフを並べる画面全体の設計に進むときに役立ちます - [Redux Toolkitとは？createSliceとRTK Queryの実装と採用判断【2026年8月版】](https://www.issoh.co.jp/tech/details/16013/)：Recharts 3系が内部で使う状態管理の仕組みを補えます - [React Compilerとは？自動メモ化の仕組みと導入方法・useMemoとの違いを解説](https://www.issoh.co.jp/tech/details/9415/)：dataKeyの参照を安定させる手段の選択肢です - [EChartsとは？6.1系の部分インポートと大量データの描画設定・Chart.jsとの選び分け](https://www.issoh.co.jp/tech/details/19054/)：Rechartsでは重くなる点数や標準外のグラフを描く側の導入と設定を確認できます --- 出典: [Rechartsとは？3.10系の導入コードとSVG描画の限界・Chart.jsとの選び分け]()（株式会社一創）