【Recharts】複数のチャートを組み合わせて表示する

# はじめに
この記事では、React 向けのチャート（グラフ）ライブラリである **Recharts** を使って複数のチャート（Area、Bar、Line）を組み合わせて表示する方法を記載します。

https://recharts.org/en-US

# 開発環境
開発環境は以下の通りです。

- Windows 11
- Next.js 14.2.4
- React 18.3.1
- TypeScript 5.5.2
- Recharts 2.13.2

# 表示するデータ
表示するデータは以下の通りです。
X軸に `name` の値、Y軸に `uv`、`pv`、`amt` の値を表示します。

```data.ts
export const data = [
  {
    name: "Page A",
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: "Page B",
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: "Page C",
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: "Page D",
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: "Page E",
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: "Page F",
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: "Page G",
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

```

# チャートの実装
まずはチャート表示欄の全体を `ComposedChart` というコンポーネントで囲みます。
props には、縦横のサイズ及びチャートに表示するデータを渡します。

https://recharts.org/en-US/api/ComposedChart

```page.tsx
"use client";

import { ComposedChart } from "recharts";
import { data } from "./data";

export default function ComposedCharts() {
  return <ComposedChart width={800} height={450} data={data}></ComposedChart>;
}

```

この時点では、指定した縦横サイズの SVG がレンダリングされるだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/83742415-5bb7-9a98-23f8-5c358b1b209b.png)

## `Area` の追加
`ComposedChart` コンポーネント内に `Area` を追加すると Area Chart が表示されます。

https://recharts.org/en-US/api/Area

```page.tsx
"use client";

import { Area, ComposedChart } from "recharts";
import { data } from "./data";

export default function ComposedCharts() {
  return (
    <ComposedChart width={800} height={450} data={data}>
      <Area dataKey="amt" fill="#adffff" stroke="#7fbfff" />
    </ComposedChart>
  );
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/c91955bd-db61-071e-0754-010579ea6bf0.png)

## `Bar` の追加
`Bar` を追加すると、Bar Chart が表示されます。

https://recharts.org/en-US/api/Bar

```page.tsx
"use client";

import { Area, Bar, ComposedChart } from "recharts";
import { data } from "./data";

export default function ComposedCharts() {
  return (
    <ComposedChart width={800} height={450} data={data}>
      <Area dataKey="amt" fill="#adffff" stroke="#7fbfff" />
      <Bar dataKey="pv" barSize={20} fill="#7fff7f" />
    </ComposedChart>
  );
}
```

以下のように Area Chart と BarChart が組み合わさって表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/13c742f6-caa2-b4bc-7bd4-7f8d3aaf5273.png)

## `Line` の追加
`Line` を追加すると、Line Chart も追加されます。

https://recharts.org/en-US/api/Line

```page.tsx
"use client";

import { Area, Bar, ComposedChart, Line } from "recharts";
import { data } from "./data";

export default function ComposedCharts() {
  return (
    <ComposedChart width={800} height={450} data={data}>
      <Area dataKey="amt" fill="#adffff" stroke="#7fbfff" />
      <Bar dataKey="pv" barSize={20} fill="#7fff7f" />
      <Line dataKey="uv" stroke="#ff7f7f" />
    </ComposedChart>
  );
}

```

## その他パーツの追加
以下のようなパーツも追加できます。

- X軸

https://recharts.org/en-US/api/XAxis

- Y軸

https://recharts.org/en-US/api/YAxis

- ツールチップ

https://recharts.org/en-US/api/Tooltip

- 凡例

https://recharts.org/en-US/api/Legend

- 座標

https://recharts.org/en-US/api/CartesianGrid

```page.tsx
"use client";

import {
  Area,
  Bar,
  CartesianGrid,
  ComposedChart,
  Legend,
  Line,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { data } from "./data";

export default function ComposedCharts() {
  return (
    <ComposedChart width={800} height={450} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <CartesianGrid stroke="#f5f5f5" />
      <Area dataKey="amt" fill="#adffff" stroke="#7fbfff" />
      <Bar dataKey="pv" barSize={20} fill="#7fff7f" />
      <Line dataKey="uv" stroke="#ff7f7f" />
    </ComposedChart>
  );
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/e76101bd-2de5-8a1d-cbb0-88f4966cb032.png)


# 参照
- [ComposedChart](https://recharts.org/en-US/api/ComposedChart)