[React/Recharts] X軸でスクロールできる時系列データのグラフを作成してみた

RechartsであればReactでX軸でスクロールできる時系列データのグラフを簡単に作成できます

#React

#Recharts

うらわ

2021.01.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部のうらわです。

今回はReactでX軸でスクロールできる時系列データのグラフを作成してみました。

環境

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.15.6
BuildVersion:   19G2021

$ node -v
v12.18.3

$ npm -v
6.14.6

ライブラリ選定

今回は以下の2つの記事でTop 1として挙げられているRechartsを使用してみました。

Top 5 React Chart Libraries for 2020

React向けチャート描画ライブラリ Top 6

create-react-appで雛形を作成してRechartsをインストールします。

npx create-react-app recharts-sample --template typescript
cd recharts-sample

yarn add recharts@1.8.5
yarn add -D @types/recharts

ちなみに、本記事執筆時点ではRechartsの最新版は2.0.0ですが、以下のissueのような問題が発生してyarn startでアプリを起動させることができません。そのため、バージョン1.8.5を指定してインストールします。

参考: GitHubのissue

実装

Rechartsであれば追加のプラグインを必要とせずやりたいことが実現できました。

以下のように、時系列データをグラフ化しX軸でスクロールすることができるグラフを作成することができます。ズームイン/アウトもできます。

コードは以下に格納してあります。

肝心なグラフを描画するコンポーネントのコードは以下の通りです。Rechartsのexampleを参考にしつつ好みのスタイルに調整しています。

import React from 'react';
import { DateTime } from 'luxon';
import {
  Legend,
  ReferenceLine,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Brush,
} from 'recharts';

// 良い感じにtimestampをフォーマットしたいのでluxonを使用しています
const now = DateTime.local();
const MAX_DATA_COUNT = 100;
const timeData = [...Array(MAX_DATA_COUNT)].map((_, i) => {
  return {
    timestamp: now.plus({ second: i }).toFormat('y/MM/dd HH:mm:ss'),
    value: Math.random(),
  };
});

const TimeLineChart = () => {
  return (
    <LineChart
      width={1200}
      height={600}
      data={timeData}
      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="timestamp" tick={{ fontSize: '.7rem' }} />
      <YAxis />
      <Tooltip />
      <Legend verticalAlign="top" wrapperStyle={{ lineHeight: '40px' }} />
      <ReferenceLine y={0} stroke="#000" />
      <Brush
        className="TimeLineChart-brush"
        dataKey="timestamp"
        stroke="#8884d8"
        startIndex={70}
        endIndex={99}
      />
      <Line dataKey="value" fill="#8884d8" />
    </LineChart>
  );
};

export default TimeLineChart;