Recharts

D3の上に構築されたReact チャーティングライブラリで、合成可能で宣言的なデータビジュアライゼーションを提供します。

クイックスタート

1. Recharts をインストール

npm install recharts

2. 基本的なチャート構造

すべての Recharts チャートは同じパターンに従います:

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  { name: 'Jan', sales: 4000, profit: 2400 },
  { name: 'Feb', sales: 3000, profit: 1398 },
  { name: 'Mar', sales: 2000, profit: 9800 },
];

<ResponsiveContainer width="100%" height={300}>
  <LineChart data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Line type="monotone" dataKey="sales" stroke="#8884d8" />
    <Line type="monotone" dataKey="profit" stroke="#82ca9d" />
  </LineChart>
</ResponsiveContainer>

コアコンセプト

データフォーマット

Recharts は オブジェクトの配列 としてのデータを想定しています。各オブジェクトはデータポイントを表します:

const data = [
  { month: 'Jan', revenue: 4000, expenses: 2400 },
  { month: 'Feb', revenue: 3000, expenses: 1398 },
];

dataKey プロップを使用してオブジェクトのプロパティをチャートコンポーネントにマップします:

• dataKey="revenue" - revenue プロパティにマップ
• dataKey={(entry) => entry.revenue - entry.expenses} - 計算値用の関数

コンポーネント合成

チャートは特殊なコンポーネントをネストすることで構築されます:

サイズ設定: responsive プロップ (v3.3+)、ResponsiveContainer ラッパー、または width/height を直接設定します

チャートタイプ (1つを選択):

• LineChart - 折れ線グラフと面グラフ
• BarChart - 棒グラフと列グラフ
• AreaChart - スタック型および塗りつぶし面グラフ
• PieChart - 円グラフとドーナツグラフ
• ScatterChart - 散布図とバブルチャート
• ComposedChart - 複数のチャートタイプを混合
• RadarChart - レーダー/スパイダーチャート
• RadialBarChart - 円形棒グラフ

一般的な子コンポーネント:

• XAxis / YAxis - 軸の設定
• CartesianGrid - グリッドライン
• Tooltip - ホバー時の情報表示
• Legend - シリーズの識別
• Line / Bar / Area / Pie - データシリーズの表示

チャートタイプ別パターン

折れ線グラフ

<LineChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} dot={{ r: 4 }} />
</LineChart>

主要なプロップ:

• type: "monotone" (スムーズ)、"linear"、"step"、"natural"
• stroke: 線の色
• strokeWidth: 線の太さ
• dot: ポイントのスタイリング (false に設定するとポイントを非表示)
• activeDot: ホバー時のポイントのスタイリング
• connectNulls: true に設定するとギャップを接続

面グラフ

<AreaChart data={data}>
  <defs>
    <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
  </defs>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Area type="monotone" dataKey="value" stroke="#8884d8" fillOpacity={1} fill="url(#colorValue)" />
</AreaChart>

スタック型面グラフ:

<Area type="monotone" dataKey="sales" stackId="1" stroke="#8884d8" fill="#8884d8" />
<Area type="monotone" dataKey="profit" stackId="1" stroke="#82ca9d" fill="#82ca9d" />

棒グラフ

<BarChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Legend />
  <Bar dataKey="sales" fill="#8884d8" radius={[4, 4, 0, 0]} />
  <Bar dataKey="profit" fill="#82ca9d" radius={[4, 4, 0, 0]} />
</BarChart>

主要なプロップ:

• fill: 棒の色
• radius: 丸みのあるコーナー [左上、右上、右下、左下] または全てのコーナー用の単一の数値
• barSize: 固定の棒の幅
• stackId: 棒をスタックにグループ化
• shape: カスタム棒の形状 (関数またはエレメント)

スタック型の棒:

<Bar dataKey="sales" stackId="a" fill="#8884d8" />
<Bar dataKey="profit" stackId="a" fill="#82ca9d" />

丸みのあるスタック型の棒 (BarStack を使用してスタック全体を丸くします):

import { BarStack } from 'recharts';

<BarChart data={data}>
  <BarStack stackId="a" radius={[4, 4, 0, 0]}>
    <Bar dataKey="sales" fill="#8884d8" />
    <Bar dataKey="profit" fill="#82ca9d" />
  </BarStack>
</BarChart>

円グラフ

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

<PieChart>
  <Pie
    data={data}
    dataKey="value"
    nameKey="name"
    cx="50%"
    cy="50%"
    innerRadius={60}
    outerRadius={80}
    paddingAngle={5}
    shape={(props) => <Sector {...props} fill={COLORS[props.index % COLORS.length]} />}
  />
  <Tooltip />
  <Legend />
</PieChart>

主要なプロップ:

• innerRadius: 0より大きい場合はドーナツグラフを作成
• outerRadius: 円グラフのサイズ
• paddingAngle: スライス間のギャップ
• startAngle / endAngle: 部分円グラフ (デフォルト: 0〜360)
• label: スライスに値を表示
• shape: 各スライスのカスタムレンダー (非推奨の Cell コンポーネントを置き換え)

散布図

<ScatterChart>
  <XAxis type="number" dataKey="x" name="X Axis" />
  <YAxis type="number" dataKey="y" name="Y Axis" />
  <CartesianGrid />
  <Tooltip cursor={{ strokeDasharray: '3 3' }} />
  <Scatter name="Series A" data={data} fill="#8884d8" />
</ScatterChart>

複合チャート

複数のチャートタイプを混合:

<ComposedChart data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid stroke="#f5f5f5" />
  <Tooltip />
  <Legend />
  <Area type="monotone" dataKey="total" fill="#8884d8" stroke="#8884d8" />
  <Bar dataKey="sales" barSize={20} fill="#413ea0" />
  <Line type="monotone" dataKey="profit" stroke="#ff7300" />
</ComposedChart>

レスポンシブサイジング

オプション 1: responsive プロップ (Recharts 3.3+、推奨)

チャート自体に responsive を設定します。標準的な CSS サイジングルールを使用します:

<LineChart data={data} width="100%" height={300} responsive>
  {/* chart components */}
</LineChart>

Flexbox と CSS グリッドレイアウトで動作します。CSS style プロップもサポートしています:

<LineChart data={data} responsive style={{ maxWidth: 800, width: '100%', aspectRatio: '16/9' }}>
  {/* chart components */}
</LineChart>

オプション 2: ResponsiveContainer (古いバージョン)

Recharts < 3.3 の場合は、チャートを ResponsiveContainer でラップします:

<ResponsiveContainer width="100%" height={300}>
  <LineChart data={data}>
    {/* chart components */}
  </LineChart>
</ResponsiveContainer>

重要: ResponsiveContainer は定義された寸法を持つ親を必要とします。高さは数値である必要があり、パーセンテージではありません。

静的サイジング

width と height をピクセルまたはパーセンテージとして直接設定:

<LineChart data={data} width={600} height={300}>
  {/* chart components */}
</LineChart>

軸の設定

XAxis / YAxis プロップ

<XAxis 
  dataKey="name"           // 表示するプロパティ
  type="category"          // "category" または "number"
  domain={[0, 'dataMax']}    // 軸の範囲
  tick={{ fill: '#666' }}    // 目盛りのスタイリング
  tickFormatter={(value) => `$${value}`}  // ラベルのフォーマット
  angle={-45}               // ラベルを回転
  textAnchor="end"         // テキスト配置
  height={60}              // ラベル用の追加スペース
/>

軸のタイプ

• カテゴリ軸 (X のデフォルト): 値を離散ラベルとして扱う
• 数値軸 (Y のデフォルト): 値を連続スケールとして扱う

カスタム定義域

軸の範囲を制御:

// 固定範囲
<YAxis domain={[0, 100]} />

// パディング付きの自動
<YAxis domain={[0, 'auto']} />

// データベースの溢れ許可
<YAxis domain={[0, 'dataMax + 100']} allowDataOverflow />

// 対数スケール
<YAxis type="number" scale="log" domain={['auto', 'auto']} />

カスタマイズ

カスタムツールチップ

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label}`}</p>
        <p className="intro">{`Sales: ${payload[0].value}`}</p>
        <p className="desc">追加情報...</p>
      </div>
    );
  }
  return null;
};

<Tooltip content={<CustomTooltip />} />

カスタム凡例

const CustomLegend = ({ payload }) => (
  <ul>
    {payload.map((entry, index) => (
      <li key={`item-${index}`} style={{ color: entry.color }}>
        {entry.value}
      </li>
    ))}
  </ul>
);

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

カスタム形状

カスタム棒の形状:

const CustomBar = (props) => {
  const { x, y, width, height, fill } = props;
  return <path d={`M${x},${y} ...`} fill={fill} />;
};

<Bar shape={<CustomBar />} dataKey="sales" />
// または
<Bar shape={(props) => <CustomBar {...props} />} dataKey="sales" />

カスタムラベル

<Line 
  dataKey="sales" 
  label={{ position: 'top', fill: '#666', fontSize: 12 }}
/>

// カスタムラベルコンポーネント
<Line 
  dataKey="sales" 
  label={<CustomLabel />}
/>

スタイリング

チャートのスタイル:

<LineChart style={{ backgroundColor: '#f5f5f5' }}>

軸のスタイリング:

<XAxis 
  axisLine={{ stroke: '#666' }}
  tickLine={{ stroke: '#666' }}
  tick={{ fill: '#666', fontSize: 12 }}
/>

グリッドのスタイリング:

<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />

インタラクション

アクティブ要素とインタラクション制御

Tooltip コンポーネントはアクティブ要素のハイライト表示を制御します。activeIndex プロップを使用しないでください (v3で削除されました)。

ツールチップインタラクションプロップ:

• defaultIndex: レンダリング時にハイライトする初期アイテムを設定
• active: true の場合、インタラクション終了後もツールチップはアクティブなままです
• trigger: "hover" (デフォルト) または "click" クリックベースのインタラクション
• content: カスタムコンテンツまたは () => null ツールチップテキストを非表示にしつつハイライトを保持
• cursor: プロット領域の視覚的なカーソル、false に設定して非表示

{/* クリックベースのインタラクションと非表示のツールチップテキスト */}
<Tooltip trigger="click" content={() => null} cursor={false} />

{/* レンダリング時にハイライトするデフォルトアイテム */}
<Tooltip defaultIndex={2} />

クリックイベント

<LineChart onClick={(e) => console.log(e)}>
  <Bar 
    dataKey="sales" 
    onClick={(data, index) => console.log('Bar clicked:', data)}
  />
</LineChart>

同期チャート

syncId を使用して複数のチャートをリンク:

<LineChart data={data1} syncId="anyId">
  {/* components */}
</LineChart>

<LineChart data={data2} syncId="anyId">
  {/* components - tooltips synchronize */}
</LineChart>

ズーム用のブラシ

<LineChart data={data}>
  {/* other components */}
  <Brush dataKey="name" height={30} stroke="#8884d8" />
</LineChart>

パフォーマンス最適化

1. 安定した参照

プロップに useMemo と useCallback を使用:

// 悪い例 - 毎回レンダリングで新しい関数が生成される
<Line dataKey={(entry) => entry.sales * 2} />

// 良い例 - 安定した参照
const dataKey = useCallback((entry) => entry.sales * 2, []);
<Line dataKey={dataKey} />

2. コンポーネントをメモ化

const MemoizedChart = React.memo(({ data }) => (
  <LineChart data={data}>
    {/* components */}
  </LineChart>
));

3. 変更されるコンポーネントを分離

頻繁に更新されるコンポーネントを分離:

const Chart = () => {
  const [hoveredData, setHoveredData] = useState(null);
  
  return (
    <LineChart>
      {/* 静的コンポーネント */}
      <Line dataKey="sales" />
      
      {/* 動的オーバーレイ */}
      <ReferenceLine x={hoveredData?.x} stroke="red" />
    </LineChart>
  );
};

4. イベントをデバウンス

import { useDebouncedCallback } from 'use-debounce';

const handleMouseMove = useDebouncedCallback((e) => {
  setPosition(e.activeLabel);
}, 10);

<LineChart onMouseMove={handleMouseMove}>

5. データポイント数を削減

大規模なデータセットの場合は、集計を検討してください:

// レンダリング前にデータをビン化
const binnedData = useMemo(() => {
  return d3.bin().value(d => d.x)(rawData);
}, [rawData]);

アクセシビリティ

Recharts には組み込みのアクセシビリティサポートが含まれています:

<LineChart accessibilityLayer={true}>
  <Line dataKey="sales" name="Monthly Sales" />
</LineChart>

アクセシビリティはデフォルトで有効です。チャートはキーボードナビゲーション対応で、スクリーンリーダーと互換性があります。

ARIA プロップ:

<LineChart role="img" aria-label="月間収益を表すセールスチャート">

一般的なパターン

複数のデータシリーズ

<LineChart data={data}>
  <XAxis dataKey="month" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="productA" name="Product A" stroke="#8884d8" />
  <Line type="monotone" dataKey="productB" name="Product B" stroke="#82ca9d" />
  <Line type="monotone" dataKey="productC" name="Product C" stroke="#ffc658" />
</LineChart>

横棒グラフ

<BarChart layout="vertical" data={data}>
  <XAxis type="number" />
  <YAxis type="category" dataKey="name" />
  <Bar dataKey="value" />
</BarChart>

ドーナツグラフ

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

<PieChart>
  <Pie
    data={data}
    innerRadius={60}
    outerRadius={80}
    paddingAngle={5}
    dataKey="value"
    shape={(props) => <Sector {...props} fill={COLORS[props.index % COLORS.length]} />}
  />
</PieChart>

注記: Cell コンポーネントは非推奨であり、Recharts 4.0 で削除される予定です。代わりに Bar、Pie、Scatter などの shape プロップを使用してください。

参照線/領域

<LineChart data={data}>
  {/* ... */}
  <ReferenceLine y={5000} label="Target" stroke="red" strokeDasharray="3 3" />
  <ReferenceArea x1="Jan" x2="Mar" fill="#8884d8" fillOpacity={0.1} />
</LineChart>

エラーバー

<ScatterChart>
  <Scatter data={data}>
    <ErrorBar dataKey="errorX" width={4} strokeWidth={2} />
    <ErrorBar dataKey="errorY" width={4} strokeWidth={2} direction="y" />
  </Scatter>
</ScatterChart>

統合パターン

状態管理との連携

const SalesChart = () => {
  const [timeRange, setTimeRange] = useState('month');
  const data = useSelector(state => selectSalesData(state, timeRange));
  
  return (
    <ResponsiveContainer>
      <LineChart data={data}>
        {/* components */}
      </LineChart>
    </ResponsiveContainer>
  );
};

リアルタイムデータとの連携

const RealtimeChart = () => {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setData(prev => [...prev.slice(-20), newDataPoint]);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  
  return (
    <LineChart data={data}>
      <XAxis dataKey="time" />
      <YAxis domain={['auto', 'auto']} />
      <Line type="monotone" dataKey="value" isAnimationActive={false} />
    </LineChart>
  );
};

Z-Index とレイヤリング (v3.4+)

コンポーネントはデフォルトの順序でレンダリングされます (グリッド < 軸 < チャート要素 < ツールチップ/凡例)。zIndex プロップで上書きします:

<Line dataKey="sales" zIndex={10} />  // 上に表示

直接の zIndex サポートのないコンポーネントの場合は、ZIndexLayer でラップします:

import { ZIndexLayer } from 'recharts';

<ZIndexLayer zIndex={5}>
  <CustomAnnotation />
</ZIndexLayer>

座標システム

Recharts には 3 つの座標システムがあります:

1. ドメイン座標 - データ値 (例: x="March"、y=5000)。ReferenceLine、ReferenceDot、ReferenceArea で使用。自動的にピクセルに変換されます。
2. ピクセル座標 - チャート viewBox に相対的なポジション。カスタム SVG 形状で使用。usePlotArea()、useOffset()、useChartWidth() フックで利用可能。
3. マウスイベント座標 - ブラウザビューポート座標。getRelativeCoordinate(event, element) で変換します。

システム間の変換:

• データからピクセル: useXAxisScale()、useYAxisScale()
• ピクセルからデータ: useXAxisInverseScale()、useYAxisInverseScale()

トラブルシューティング

チャートがレンダリングされない

• ResponsiveContainer が定義された寸法を持つ親を持つことを確認
• 高さが数値であることを確認 (ResponsiveContainer ではパーセンテージではない)
• データがオブジェクトの配列であることを確認

ツールチップが表示されない

• Tooltip コンポーネントが含まれていることを確認
• dataKey 値がデータオブジェクトに存在することを確認

軸ラベルが重複している

• ラベルを回転: <XAxis angle={-45} textAnchor="end" height={80} />
• interval を使用: <XAxis interval={0} /> (0 = すべて表示、'preserveStartEnd' = 自動)

アニメーションの問題

• 無効化: <Line isAnimationActive={false} />
• 期間を短縮: <Line animationDuration={500} />

リソース

リファレンス

• API リファレンス - 完全なコンポーネント プロップと API の詳細
• 例 - 一般的なチャートパターンとコードスニペット
• ベストプラクティス - パフォーマンスと設計ガイドライン

外部リソース

• 公式ドキュメント
• Storybook
• GitHub