Recharts v3 グラフ実装ガイド

検証日: 2026-05-09

使用バージョン: recharts@3.7.0

対象: React で軽量なダッシュボード / 可視化を組みたい、d3 を直接書くほどではない場面

Recharts v3 で React に bar / line / pie chart を ResponsiveContainer + テーマ追従で描く最小コード、tooltip / legend の基本カスタマイズを動く demo で確認します。中級以降は /articles/recharts-v3-composing-charts/ / /articles/recharts-v3-advanced-customization/ で深掘り。

触って試す #

CSV(1 行目 = ヘッダ)を編集すると、x 軸 = 1 列目、数値列を bar として描画。

最小サンプル #

<ResponsiveContainer> で親の幅に追従、<BarChart data> に flat な配列を渡し、<Bar dataKey> で y 軸の値を指す:

import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";

const data = [
  { month: "Jan", visits: 420 },
  { month: "Feb", visits: 540 },
  { month: "Mar", visits: 610 },
];

export function Chart() {
  return (
    <ResponsiveContainer width="100%" height={320}>
      <BarChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="visits" fill="#3b82f6" />
      </BarChart>
    </ResponsiveContainer>
  );
}

ResponsiveContainer で囲むと親要素の幅に追従する。

複数系列 #

同じ <BarChart> の中に <Bar> を複数並べる。stackId を揃えると積み上げ棒に:

<BarChart data={data}>
  <XAxis dataKey="month" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="visits" fill="#3b82f6" />
  <Bar dataKey="signups" fill="#22c55e" />
</BarChart>

Legend で凡例、Tooltip でホバー時の値表示。

テーマ(ダーク対応) #

CSS 変数 + style で渡せば data-theme 切替に追従:

<XAxis tick={{ fill: "var(--color-ink-soft)", fontSize: 11 }} />
<CartesianGrid stroke="var(--color-line)" />
<Tooltip
  contentStyle={{
    background: "var(--color-paper)",
    border: "1px solid var(--color-line)",
  }}
/>

チャートタイプ #

つまずいたポイント #

• ResponsiveContainer の親に高さが必要:親要素に height がないと描画されない(0px)
• 同じ data キーを 2 つの Bar に渡すとフィルバグ:必ず別の dataKey にする
• Tooltip のスタイル変更は contentStyle / labelStyle / itemStyle で渡す(直接 className では効かない)
• legend の名前を変えたい時は Bar name="表示名" を指定
• 数値以外を dataKey にすると描画されない:CSV からパースした時に Number() 変換忘れに注意

評価 #

向く / 向かないケース #

• 向く: ダッシュボード、レポート、軽量可視化、SSR / static 上の React Island
• 向かない: 1 万点超の大規模可視化(visx / @visx + canvas、または Plotly)
• 向かない: 複雑な地理可視化(deck.gl / Mapbox)、ネットワーク図(d3-force)
• 向かない: 独自 transition / 軸装飾 / 数値 tween が必要 → D3 直接書き を検討

関連 Topic / 関連書籍 #

この記事と関係する tech-book.net の Topic と、それぞれの Topic に紐づく書籍:

• /topics/react
• /topics/react-hooks
• /topics/javascript

tech-book.net /books/9784839966645

React Native＋Expoではじめるスマホアプリ開発 : JavaScriptによるアプリ構築の実際

松澤 太郎 · マイナビ出版 · 2018年

「React Native」は、Facebookが開発しているスマートフォンアプリ向けの開発環境です。ほとんどのコードをJav…

詳細を tech-book.net で見る →

tech-book.net /books/9784873119380

Reactハンズオンラーニング 第2版 : Webアプリケーション開発のベストプラクティス

Alex Banks/Eve Porcello/宮崎 空 · オライリー・ジャパン · 2021年 · ¥3,740

Webフロントエンドの「今」を学びたい人へ！ Facebookが開発したJavaScrip…

詳細を tech-book.net で見る →

tech-book.net /books/9784873117881

Reactビギナーズガイド : コンポーネントベースのフロントエンド開発入門

Stoyan Stefanov/牧野 聡 · オライリー・ジャパン · 2017年 · ¥2,750

FacebookのエンジニアによるReactの入門書！ ReactによるコンポーネントベースのWebフロントエンド開発の…

詳細を tech-book.net で見る →

tech-book.net /books/9784297129163

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

手島 拓也/吉田 健人/高林 佳稀 · 技術評論社 · 2022年

新しいフロントエンドの入門書決定版！ 本書はReact/Next.jsとTypeScriptを用いてWebアプリケーションを開…

詳細を tech-book.net で見る →

検証日: 2026-05-10

使用バージョン: recharts@3.7.0

対象: 既に最小サンプルは動いている、ダッシュボード級の表現に踏み込みたい人

入門は /articles/recharts-v3-bar-chart-recipes/(bar / line / pie / theme)を参照。さらに踏み込んだ凡例 / Tooltip / Cell カスタマイズは /articles/recharts-v3-advanced-customization/。本稿は「Recharts らしさ」が出る 4 つの中級パターン。

触って試す #

1. Sparkline(軸なし、56px 高の埋込型) #

リスト行 / カード内に「ぽい」推移を見せる UI。グラデーション fill が決定打。

import { Area, AreaChart, ResponsiveContainer } from "recharts";

function Sparkline({ data }: { data: { v: number }[] }) {
  return (
    <div style={{ width: 200, height: 56 }}>
      <ResponsiveContainer>
        <AreaChart data={data}>
          <defs>
            <linearGradient id="sparkGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.4} />
              <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
            </linearGradient>
          </defs>
          <Area
            type="monotone"
            dataKey="v"
            stroke="#3b82f6"
            strokeWidth={1.5}
            fill="url(#sparkGrad)"
            isAnimationActive={false}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

ポイント:

• <XAxis> / <YAxis> / <Tooltip> を全て省略(軸なし、ラベルなし、値の絶対量より「形」を見せる)
• linearGradient で色面の濃淡(上濃、下透明)を作り、抽象的な美しさを出す
• isAnimationActive={false}:一覧で大量に並べる時、各 sparkline の入場アニメは UX を損ねる
• gradient の id をユニーク化:同じ ID を複数描くと最初の 1 つだけ着色される(businessId などで unique 化)

2. テーマ追従の CustomTooltip(typed) #

Tooltip のデフォルトは light 配色固定。content={CustomTooltip} で React Component を渡せばテーマ追従できる。型を絞ると payload の扱いがミス少ない。

type TipEntry = { color?: string; name?: string; value?: number; dataKey?: string | number };
function CustomTooltip({
  active, payload, label,
}: { active?: boolean; payload?: TipEntry[]; label?: string }) {
  if (!active || !payload?.length) return null;
  return (
    <div
      className="text-xs px-3 py-2 rounded shadow"
      style={{
        background: "var(--color-paper)",
        border: "1px solid var(--color-line)",
        color: "var(--color-ink)",
      }}
    >
      {label && <div className="font-semibold mb-1">{label}</div>}
      {payload.map((e) => (
        <div key={String(e.dataKey)} className="flex items-center gap-2">
          <span style={{ background: e.color, width: 8, height: 8 }} />
          <span className="font-mono">{e.name}: {e.value?.toLocaleString()}</span>
        </div>
      ))}
    </div>
  );
}

<Tooltip content={CustomTooltip} />

payload は配列で、各 entry に dataKey / name / value / color がある。Recharts は型をやや緩めなので、TipEntry のように自前で narrow するのが堅い。

3. クリックで drill-down(onClick + Cell) #

棒をクリックして詳細を表示する典型パターン。ハイライトは Cell で個別 fill。

const [picked, setPicked] = useState<string | null>(null);

<BarChart
  data={data}
  onClick={(e: { activeLabel?: string }) => setPicked(e?.activeLabel ?? null)}
  style={{ cursor: "pointer" }}
>
  <Bar dataKey="visits" name="Visits">
    {data.map((d) => (
      <Cell key={d.region} fill={d.region === picked ? "#1d4ed8" : "#93c5fd"} />
    ))}
  </Bar>
</BarChart>

ポイント:

• onClick の型は緩い:activeLabel が unknown。defensive に ?? null で undefined を弾く
• <Cell> で個別塗り:Bar 直下に同数の Cell を配置すれば、index 順に上書きされる
• style={{ cursor: "pointer" }} でクリック可能なことを視覚的に示す

詳細パネルは右側 / 下側にコンポーネントとして配置して、picked の state に応じて中身を切り替える。

4. ComposedChart(Bar + Line で 2 軸) #

「訪問数(left 軸、棒)+ CVR(right 軸、線、% 単位)」のような 量と率の組み合わせ に有効。

import { Bar, ComposedChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from "recharts";

<ResponsiveContainer width="100%" height={240}>
  <ComposedChart data={data}>
    <XAxis dataKey="month" />
    <YAxis yAxisId="left" />
    <YAxis yAxisId="right" orientation="right" unit="%" />
    <Tooltip content={CustomTooltip} />
    <Legend />
    <Bar yAxisId="left" dataKey="visits" name="Visits" fill="#93c5fd" />
    <Line yAxisId="right" type="monotone" dataKey="cvr" name="CVR (%)" stroke="#dc2626" strokeWidth={2} dot={{ r: 3 }} />
  </ComposedChart>
</ResponsiveContainer>

ポイント:

• yAxisId を Bar / Line に指定し、それぞれを left / right の軸に紐付け
• orientation="right" + unit="%" で右軸の表記を区別
• dot の半径は 3px 程度:6px 以上だと装飾的に重くなる、type="monotone" で滑らかに

5. 凡例を完全自作(<Legend content={...} />) #

Recharts の標準凡例は色とラベルが連動するが、デザインを揃えたいケースでは独自 Component が早い。

const CustomLegend = () => (
  <div className="flex flex-wrap justify-center gap-4 mt-2 text-xs">
    {ITEMS.map((item) => (
      <div key={item.name} className="flex items-center" style={{ color: "var(--color-ink-soft)" }}>
        <div className="h-3 w-3 mr-1" style={{ backgroundColor: item.color }} />
        {item.name}
      </div>
    ))}
  </div>
);

<Legend content={CustomLegend} />

順序を変えたい / 色サンプルを四角ではなく丸にしたい時に使う。

つまずいたポイント #

• <defs> の id は文字列固定で複数同時描画に注意:id="spark-{itemId}" のように itemId で必ず unique 化
• onClick の型情報が薄い:{ activeLabel: string, activeTooltipIndex: number, activePayload: ... } を defensive に optional + narrow
• 2 軸の domain 自動算出が偏る:<YAxis yAxisId="right" domain={[0, 'dataMax + 5']} /> で見た目を揃える
• Cell を使うと legend の色がおかしくなる:<Bar fill="..." /> の指定を Cell が上書きするため、Legend は別途 Custom にすると分かりやすい
• Tooltip の formatter props は古い書き方:content={CustomTooltip} で React Component を渡すほうが型と表現力で勝つ

関連 Topic / 関連書籍 #

この記事と関係する tech-book.net の Topic と、それぞれの Topic に紐づく書籍:

• /topics/react
• /topics/react-hooks

tech-book.net /books/9784839966645

React Native＋Expoではじめるスマホアプリ開発 : JavaScriptによるアプリ構築の実際

松澤 太郎 · マイナビ出版 · 2018年

「React Native」は、Facebookが開発しているスマートフォンアプリ向けの開発環境です。ほとんどのコードをJav…

詳細を tech-book.net で見る →

tech-book.net /books/9784873119380

Reactハンズオンラーニング 第2版 : Webアプリケーション開発のベストプラクティス

Alex Banks/Eve Porcello/宮崎 空 · オライリー・ジャパン · 2021年 · ¥3,740

Webフロントエンドの「今」を学びたい人へ！ Facebookが開発したJavaScrip…

詳細を tech-book.net で見る →

tech-book.net /books/9784873117881

Reactビギナーズガイド : コンポーネントベースのフロントエンド開発入門

Stoyan Stefanov/牧野 聡 · オライリー・ジャパン · 2017年 · ¥2,750

FacebookのエンジニアによるReactの入門書！ ReactによるコンポーネントベースのWebフロントエンド開発の…

詳細を tech-book.net で見る →

tech-book.net /books/9784297129163

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

手島 拓也/吉田 健人/高林 佳稀 · 技術評論社 · 2022年

新しいフロントエンドの入門書決定版！ 本書はReact/Next.jsとTypeScriptを用いてWebアプリケーションを開…

詳細を tech-book.net で見る →

検証日: 2026-05-11

使用バージョン: recharts@3.7.0

対象: 入門 + ComposedChart は通った、本番に出すために細部の挙動を変えたい人

前提となる入門・中級は別記事:

• /articles/recharts-v3-bar-chart-recipes/ — basics(bar/line/pie + テーマ + tooltip/legend 基本)
• /articles/recharts-v3-composing-charts/ — Sparkline / drill-down / ComposedChart(Bar + Line 2 軸)

本稿は 「default が思い通りにならない」のを自前実装で詰める パターン。

触って試す #

凡例の並び順 / Tooltip の sort 順 / target line の表示を切り替えると、それぞれが独立した自前実装で動いていることが確認できる。凡例ボタンをクリックすると該当 series が toggle、累計が target を超えた月は bar に accent 色の枠線が描かれる。

なぜ自前実装が必要になるか #

Recharts の default は 最小限の表示には十分だが、業務で求められる形と合わないことが多い:

ここでは上 5 つを 1 つのチャートに同居させる形で実装します。

1. 凡例を完全自作(<Legend content={...} />) #

凡例の 並び順 + クリックで toggle + 値の同時表示 を全部やるには、content に React 要素を渡して default を捨てる。

const SERIES = [
  { key: "tokyo",   label: "東京",   color: "#3b82f6" },
  { key: "osaka",   label: "大阪",   color: "#ec4899" },
  { key: "nagoya",  label: "名古屋", color: "#10b981" },
  { key: "fukuoka", label: "福岡",   color: "#f59e0b" },
];

const [hidden, setHidden] = useState(new Set<string>());
const [legendSort, setLegendSort] = useState<"insert" | "value-desc" | "alpha">("value-desc");

// 各 series の合計を pre-compute(memo)
const totals = useMemo(() => {
  const acc: Record<string, number> = {};
  for (const s of SERIES) acc[s.key] = DATA.reduce((sum, r) => sum + r[s.key], 0);
  return acc;
}, []);

// 並び替え
const sorted = useMemo(() => {
  const arr = [...SERIES];
  if (legendSort === "value-desc") arr.sort((a, b) => totals[b.key] - totals[a.key]);
  else if (legendSort === "alpha") arr.sort((a, b) => a.label.localeCompare(b.label, "ja"));
  return arr;
}, [legendSort, totals]);

const CustomLegend = () => (
  <ul style={{ display: "flex", gap: 16, listStyle: "none", padding: 0 }}>
    {sorted.map((s) => {
      const isHidden = hidden.has(s.key);
      return (
        <li key={s.key}>
          <button onClick={() => toggle(s.key)} style={{ /* line-through if hidden */ }}>
            <span style={{ background: s.color }} />
            {s.label} <span>{totals[s.key].toLocaleString()}</span>
          </button>
        </li>
      );
    })}
  </ul>
);

<Legend content={<CustomLegend />} />

ポイント:

• content に渡したら payload 等の引数は無視 OK:Recharts が default 用に渡してくれるが、自分で render 内容を決めるなら使わなくて良い
• toggle は <Bar hide={...}> と組み合わせる(後述):凡例単独では Bar の表示は変わらない
• value 表示:totals を useMemo で先に計算、render では即時参照
• 並び順は配列を sort して map:Recharts 内部の順序は触れない(JSX で固定)、表示順だけ変える

ここだけを単独で動かす最小サンプル(3 系列 / 6 ヶ月):

2. クリックで series を表示 / 非表示(<Bar hide={...}>) #

凡例ボタンを押した時に bar 自体を消す / 戻す 動作:

{SERIES.map((s) => (
  <Bar
    key={s.key}
    dataKey={s.key}
    stackId="a"
    fill={s.color}
    hide={hidden.has(s.key)}  // ← この prop が key
  />
))}

hide={true} を渡すと Bar の領域ごと非表示(stack の場合は積み上げから抜ける)。

注意:

• Recharts default の Legend hover/click では state は変わらない — Recharts は visual feedback だけで、表示制御は自分で書く必要
• stack 構成では hide した分が積み上げから抜ける → 残りの bar の高さが変わる(want と一致するか UX 検証)

3. Tooltip 内の値順を制御 #

<Tooltip> の payload(Tooltip に渡される系列ごとの値の配列、各 entry に dataKey / name / value / color がある)は render 順(JSX 内の <Bar> 順)。これを value 降順 にしたいなら自分で sort:

const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>) => {
  if (!active || !payload?.length) return null;
  const sorted = [...payload].sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
  return (
    <div className="tooltip-card">
      <div>{label}</div>
      {sorted.map((e) => (
        <div key={e.dataKey}>
          <span style={{ background: e.color }} />
          {e.name}: {(e.value ?? 0).toLocaleString()}
        </div>
      ))}
    </div>
  );
};

<Tooltip content={CustomTooltip} />

payload は mutable な参照 が来ることがあるので [...payload] でコピーしてから sort(直接 sort すると Recharts の内部 state が壊れる事故あり)。

bar に hover して desc / insert を切り替えると、Tooltip 内の並びだけが変わる:

4. Cell で per-data-point の色 / 枠線 #

「月の累計合計が target を超えた月だけ accent 枠線」のような per data point の塗り分け(データ 1 点ごとの色変更)は、<Bar> 直下に 同数の <Cell>(bar の 1 マス分を表す component)を並べる:

<Bar dataKey="tokyo" stackId="a" fill="#3b82f6">
  {DATA.map((row, i) => {
    const total = SERIES.reduce((s, x) => s + row[x.key], 0);
    const over = total >= TARGET;
    return (
      <Cell
        key={i}
        fill="#3b82f6"        // 通常色
        stroke={over ? "var(--color-accent)" : "none"}
        strokeWidth={over ? 2 : 0}
      />
    );
  })}
</Bar>

ポイント:

• <Cell> は data の index 順に上書き:DATA 配列と同数並べる、順番が大事
• fill を Cell ごとに変えることで bar 単位の色変化(threshold / category 別 etc.)
• stack 構成では各 series それぞれに Cell を並べる必要:1 つの bar = 1 layer なので、layer ごとに個別の Cell 戦略を組む

threshold スライダで「線を超えた月だけ色が変わる」のを実感できる:

5. ReferenceLine / ReferenceArea で目標線・警告帯 #

これは 標準 component で十分:

<ReferenceLine
  y={400}
  stroke="var(--color-accent)"
  strokeDasharray="4 2"
  label={{ value: "目標 400", fill: "var(--color-accent)", fontSize: 10, position: "right" }}
/>

// 帯で範囲を強調(警告ゾーン etc.)
<ReferenceArea y1={500} y2={Infinity} fill="#dc2626" fillOpacity={0.1} label="警告ゾーン" />

ポイント:

• label.position:"top" / "right" / "insideBottomRight" 等で配置可
• <ReferenceArea y1 y2> は y 軸の範囲、x は省略可(縦帯にしたいなら x1 x2 指定)
• 複数の Reference:必要数並べれば描画される(legend には出ない)

警告ゾーンを toggle すると ReferenceArea の帯が出たり消えたりする:

6. ComposedChart に Bar + Line 同居 #

Bar の累計に target に向かう曲線を重ねる:

const totalLine = useMemo(
  () => DATA.map((r) => ({
    ...r,
    total: SERIES.filter((s) => !hidden.has(s.key)).reduce((sum, s) => sum + r[s.key], 0),
  })),
  [hidden],
);

<ComposedChart data={totalLine}>
  <Bar ... />  {/* SERIES.map で stack */}
  <Line type="monotone" dataKey="total" stroke="var(--color-ink)" dot={false} />
  <ReferenceLine y={TARGET} ... />
</ComposedChart>

ポイント:

• 同じ data 配列に新しい key(total)を加えて渡す:Recharts の data は flat shape を期待
• hide した series を line にも反映:useMemo の依存に hidden を入れて、合計を再計算

つまずいたポイント #

• <Legend content={CustomLegend} /> で何も出ない:content={CustomLegend}(関数参照)と content={<CustomLegend />}(要素)で挙動が違う。関数を渡すと Recharts が payload を引数で渡して呼ぶ、要素を渡すとそのまま表示。要件次第で使い分け
• Tooltip の payload が空配列:active を見ずに早期 render すると payload?.length === 0 で空 box が出る。if (!active || !payload?.length) return null を必ず最初に
• <Cell> を並べたら順序がずれる:DATA を sort した後の配列と Cell の順序が合わない。Cell は同じ index の data に対応するので、DATA を sort するなら Cell も同じ sort を通す
• stack で hide すると残りの高さが変わる:UX 上「総量が変わって見える」ので、要件次第では stack ではなく dataKey 別の Bar を grouped にする選択肢もある
• payload.sort() で Cannot assign to read only property:Recharts が frozen array を渡してくる場合がある。必ず [...payload] でコピーしてから sort
• ReferenceLine の label が見切れる:position: "insideTopRight" 等で chart 内側に配置するか、margin を増やしてラベル分の余白を確保
• 動的 series 切替で Recharts が re-mount:<Bar key=...> の key が変わると再 mount でアニメ最初から。key={s.key}(stable)にしておく
• isAnimationActive={false} を入れると初回描画もアニメなし → 大量データ / 頻繁更新で安定。デモ用は ON、本番値が頻繁に変わるなら OFF が無難

評価 #

関連 Topic — 体系的に学ぶための入口 #

関連書籍 — この記事の各節を補強する一冊 #

tech-book.net /books/9784873119380

Reactハンズオンラーニング 第2版 : Webアプリケーション開発のベストプラクティス

Alex Banks/Eve Porcello/宮崎 空 · オライリー・ジャパン · 2021年 · ¥3,740

Webフロントエンドの「今」を学びたい人へ！ Facebookが開発したJavaScrip…

この本が役立つ理由 — 本書の「component を小さく保つ」「state は最も下層に置く」原則は、Recharts の `<BarChart>` 内 children を再構築する本記事のパターンに直結する。グラフを独立した小 component に分割する判断軸が養われる。

詳細を tech-book.net で見る →

tech-book.net /books/9784297129163

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

手島 拓也/吉田 健人/高林 佳稀 · 技術評論社 · 2022年

新しいフロントエンドの入門書決定版！ 本書はReact/Next.jsとTypeScriptを用いてWebアプリケーションを開…

この本が役立つ理由 — 本記事の `LegendItem` / `RegionKey` / `SortMode` 型設計や discriminated union での chart props 表現は、本書の「ドメインを型で表現する」章の応用そのもの。型を厚く書くとカスタマイズが安全になる実例。

詳細を tech-book.net で見る →

tech-book.net /books/9784873117881

Reactビギナーズガイド : コンポーネントベースのフロントエンド開発入門

Stoyan Stefanov/牧野 聡 · オライリー・ジャパン · 2017年 · ¥2,750

FacebookのエンジニアによるReactの入門書！ ReactによるコンポーネントベースのWebフロントエンド開発の…

この本が役立つ理由 — useState / useMemo / useCallback の使い分けは Recharts のような重い render を含む UI で効く。本記事の「並び替えの切替時にデータをメモ化する」最適化が、薄い入門書 1 冊で身に付く。

詳細を tech-book.net で見る →

tech-book.net /books/9784839966645

React Native＋Expoではじめるスマホアプリ開発 : JavaScriptによるアプリ構築の実際

松澤 太郎 · マイナビ出版 · 2018年

「React Native」は、Facebookが開発しているスマートフォンアプリ向けの開発環境です。ほとんどのコードをJav…

この本が役立つ理由 — 同じ data viz をスマホで見せるなら React Native + Expo。Recharts の代わりに victory-native を使う形で、本記事の凡例ロジックを移植できる。

詳細を tech-book.net で見る →