Recharts入門 - データをグラフ化するための第一歩

こんにちは。フロントエンジニアの佐々木です。
この度、Rechartsというライブラリに触れる機会があったので、その機能と基本的な使い方を紹介します。

Rechartsとは

Rechartsとは、Reactアプリケーションで使用可能なグラフ描画ライブラリです。
グラフ作成に必要な要素がそれぞれ独立したコンポーネントとして提供され、それらのコンポーネントを組み合わせることで、手軽にグラフを描画できます。
また、各コンポーネントのプロパティに値を指定することで、細かいレイアウト調整ができるカスタマイズ性の高さも魅力の1つです。

Rechartsでできること

まず、実際にどんなグラフを作ることができるのかを紹介します。

よく見かける折れ線グラフはこのような感じで作れます。

ベタなパターンとしてもう1つ、棒グラフはこのような感じでできます。

そして、折れ線グラフと棒グラフを組み合わせることもできます。

レーダーチャートといった一見手間がかかりそうなものも比較的簡単に作れます。

その他にも円グラフや面グラフ、散布図など多様なグラフも再現できるので、データを可視化するケースでは心強いライブラリです。

実際にRechartsで折れ線グラフを作ってみる

では、実際に折れ線グラフを作りながら、Rechartsの基本的な使い方を見ていきましょう。

環境

前提として、今回は以下の環境で動かしていきます。

React 18.3.1
Recharts 2.13.3

事前準備

Rechartsのインストール
npm install rechartsなどでRechartsをインストールします。
データの準備
グラフに描画するためのデータを準備します。
今回は以下のサンプルデータを使います。

// 曜日別のWebサイト訪問者数のデータ
const data = [
  { day: '月', サイト訪問者数: 2200 },
  { day: '火', サイト訪問者数: 1280 },
  { day: '水', サイト訪問者数: 3300 },
  { day: '木', サイト訪問者数: 4000 },
  { day: '金', サイト訪問者数: 2900 },
  { day: '土', サイト訪問者数: 3800 },
  { day: '日', サイト訪問者数: 3500 },
];

折れ線グラフを作ってみる

準備ができたら早速作っていきます。
基本的にはグラフを描画するのに必要なコンポーネントをインポートして、組み合わせて使います。
必要最低限のコンポーネントで折れ線グラフを描画すると、以下のソースコードのようになります。

import { LineChart, Line } from 'recharts';

<LineChart width={500} height={300} data={data}>
  <Line type="monotone" dataKey="サイト訪問者数" />
</LineChart>

これで以下のようなグラフが描画されます。

X軸もY軸もない線だけという極めてシンプルなグラフの出来上がりです。

一旦ここでソースコードを振り返ってみましょう。
LineChartのdataに準備したサンプルデータを渡すことでグラフで使用するデータとして紐づけています。
そして、LineChartの子コンポーネントとしてLineを配置し、dataKeyにグラフに描画したい値（今回の場合はサイト訪問者数）を渡すことでグラフを描画しています。

しかし、これだけではグラフとして活用できそうにありません。
なので、さらにグラフっぽくしていきましょう。

以下のようにコンポーネントを追加してみます。

<LineChart width={500} height={300} data={data}>
  <Line type="monotone" dataKey="サイト訪問者数" />
  <CartesianGrid />
  <XAxis dataKey="day" />
  <YAxis />
</LineChart>

そうすると、グラフっぽくなりました。

CartesianGridによってグリッド、XAxisによってX軸、YAxisによってY軸が表示されました。

さらにTooltip、Legendコンポーネントを追加してみます。

<LineChart width={500} height={300} data={data}>
  <Line type="monotone" dataKey="サイト訪問者数" />
  <CartesianGrid />
  <XAxis dataKey="day" />
  <YAxis />
  <Tooltip />
  <Legend />
</LineChart>

すると、グラフは以下のようになります。

Legendによって凡例が表示され、Tooltipによってマウスオーバー時に近い地点のデータが表示されるようになりました。

以上のようなコンポーネントの組み合わせで、折れ線グラフを作成することができます。

さらにグラフをカスタマイズしてみる

Rechartsでは、コンポーネントのプロパティの値を変更することで、詳細なレイアウトをカスタマイズすることができます。
実は、前述しているソースコードでは、Lineコンポーネントのtype="monotone"によって線の種類を設定していました。

一例として、各コンポーネントにプロパティをいろいろ設定してみます。

<LineChart
  width={500}
  height={300}
  data={data}
  margin={{ top: 20, right: 30, bottom: 20, left: 20 }}
>
  <Line
    type="monotone"
    dataKey="サイト訪問者数"
    stroke="#8884d8"
    activeDot={{ r: 8 }}
    unit="人"
  />
  <CartesianGrid stroke="#ccc" strokeDasharray="3 3" />
  <XAxis dataKey="day" tickMargin={6}>
  <Label value="曜日" position="bottom" />
  </XAxis>
  <YAxis>
  <Label
    angle={-90}
    value="サイト訪問者数"
    position="insideBottomLeft"
  />
  </YAxis>
  <Tooltip />
  <Legend verticalAlign="bottom" wrapperStyle={{ lineHeight: '60px' }} />
</LineChart>