XENEXE

Recharts の X 軸に日時を表示させる


heroImage

1. はじめに

Recharts は,ReactD3.js を組み合わせたグラフ描画ライブラリです。本記事では,Recharts を用いて描画したグラフの X 軸に,日時を表示させる手順について記述します。以降の章で行っている作業は以下の環境下で実行したものです。また,Node.js はインストール済みの前提で記述しており,インストール手順は割愛していることをご了承ください。

2. 開発環境構築

create-react-app コマンドを用いて React の雛形を作成します
② 作成した my-app ディレクトリに移動します
③ Recharts をインストールします

Terminal window
1
$ npx create-react-app my-app ・・・
2
$ cd my-app/ ・・・
3
$ npm i -S recharts ・・・
4
$ tree -L 2
5
.
6
├── README.md
7
├── node_modules
8
│   ├── @babel
9
│   ├── @cnakazawa
10
│   ├── @csstools
11
│   ├── (省略)
12
│   ├── yaml
13
│   ├── yargs
14
│   └── yargs-parser
15
├── package-lock.json
16
├── package.json
17
├── public
18
│   ├── favicon.ico
19
│   ├── index.html
20
│   ├── logo192.png
21
│   ├── logo512.png
22
│   ├── manifest.json
23
│   └── robots.txt
24
└── src
25
├── App.css
26
├── App.js
27
├── App.test.js
28
├── index.css
29
├── index.js
30
├── logo.svg
31
├── serviceWorker.js
32
└── setupTests.js

3. 問題点

上記で作成した雛形の App.js を以下のように書き換えます。Recharts が提供しているサンプルコードの SimpleLineChart をベースにしたソースコードであり,シンプルな線グラフが描画されます。

1
import React from 'react'
2
import { LineChart, Line, XAxis, YAxis } from 'recharts'
3
4
function App() {
5
const data = [
6
{ date: '2020-01-01', sales: 100 },
7
{ date: '2020-01-02', sales: 200 },
8
{ date: '2020-01-05', sales: 300 },
9
]
10
11
return (
12
<LineChart width={500} height={300} data={data}>
13
<XAxis dataKey="date" />
14
<YAxis />
15
<Line dataKey="sales" />
16
</LineChart>
17
)
18
}
19
20
export default App

実行結果が以下になります。X 軸に日時が表示されています。しかし,2020-01-01 から 2020-01-02 の間隔と 2020-01-02 から 2020-01-05 の間隔が等しいため非常に不自然なグラフになっています。

4. 解決策

上記の問題は既に GitHub で議論されており,解決されています。具体的には,日時を文字列ではなく UNIX 時間として扱うことで解決しています。GitHub で示されているサンプルコードを参考に App.js を以下のように書き換えます。

1
import React from 'react'
2
import { LineChart, Line, XAxis, YAxis } from 'recharts'
3
4
function App() {
5
const data = [
6
{ date: new Date('2020-01-01').getTime(), sales: 100 },
7
{ date: new Date('2020-01-02').getTime(), sales: 200 },
8
{ date: new Date('2020-01-05').getTime(), sales: 300 },
9
]
10
11
return (
12
<LineChart width={500} height={300} data={data}>
13
<XAxis
14
dataKey="date"
15
domain={['dataMin', 'dataMax']}
16
tickFormatter={(unixTime) => new Date(unixTime).toLocaleDateString()}
17
type="number"
18
/>
19
<YAxis />
20
<Line dataKey="sales" />
21
</LineChart>
22
)
23
}
24
25
export default App

実行結果が以下になります。2020-01-01 から 2020-01-02 の間隔と 2020-01-02 から 2020-01-05 の間隔が異なっており,自然な線グラフとして描画されていることが確認できます。

5. おわりに

Recharts を用いて描画したグラフの X 軸に,日時を表示させる手順について記述してきました。本記事では,JavaScript に組み込まれている Date を用いて実装してきましたが,Moment.jsDay.js などの日付操作ライブラリを活用することで,より複雑な処理を簡単に行うことが出来るのでオススメです。