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

こんにちは、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を参考にしつつ好みのスタイルに調整しています。

TimeLineChart.tsx

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;

おわりに

スクロールできるグラフはreact-chartjs-2とchartjs-plugin-zoomでも実現できましたが、個人的にはRechartsの方が書きやすく感じました。

他にも色々カスタマイズできそうなので試してみたいと思います。

参考

Recharts SynchronizedLineChart