前から気になっていたReactのグラフ描画ライブラリRechartsを触ってみた。 内部でD3.jsを使っていて、READMEに書いてあるが大きな特徴は3つあるらしい。

  • Reactコンポーネントとして使える
  • 素のSVGの描画をサポート
  • 画面に表示したいコンポーネントを宣言するだけで描画可能

基本は次のように使う。

import React, { Component } from 'react'
import { LineChart, Line, XAxis, YAxis } from 'recharts'

class App extends Component {
  render() {
    const data = [
      { name: 'a', uv: 12, pv: 5 },
      { name: 'b', uv: 13, pv: 3 },
      { name: 'c', uv: 19, pv: 9 },
      { name: 'd', uv: 11, pv: 10 },
      { name: 'e', uv: 9, pv: 12 },
      { name: 'f', uv: 22, pv: 13 }
    ]
    return (
      <div className="App">
        <LineChart width={400} height={200} data={data}>
          <XAxis dataKey="name" />
          <YAxis />
          <Line dataKey="uv" stroke="#8884d8" />
          <Line dataKey="pv" stroke="#82ca9d" />
        </LineChart>
      </div>
    )
  }
}

export default App

Chart1

各チャートコンポーネント(<LineChart />など)のドキュメントに、 子コンポーネントとして受け取れるパーツのコンポーネント(<XAxis />, <Line />など)が定義されているので、 その中から描画したいコンポーネントを追加していく。

たとえば上記の例に<CartesianGrid />という格子上の線を描くコンポーネントを足すと以下のようになる。

class App extends Component {
  render() {

    // ...

    return (
      <div className="App">
        <LineChart width={400} height={200} data={data}>
          <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
          <XAxis dataKey="name" />
          <YAxis />
          <Line dataKey="uv" stroke="#8884d8" />
          <Line dataKey="pv" stroke="#82ca9d" />
        </LineChart>
      </div>
    )
  }
}

Chart2

また、チャートコンポーネントを<ResponsiveContainer />というコンポーネントで囲うと画面サイズに応じてグラフのサイズを可変にできる。

class App extends Component {
  render() {

    // ...

    return (
      <div className="App">
        <ResponsiveContainer width="80%" height="40%" minWidth={400} minHeight={200}>
          <LineChart data={data}>
            <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
            <XAxis dataKey="name" />
            <YAxis />
            <Line dataKey="uv" stroke="#8884d8" />
            <Line dataKey="pv" stroke="#82ca9d" />
          </LineChart>
        </ResponsiveContainer>
      </div>
    )
  }
}

公式では対応していないが、以下の記事によるとReact Nativeでも使えるらしい。

Using Recharts in React Native project - DZone Web Dev

以上、徒然なるままに紹介したが、けっこう使いやすく、そこそこにカスタマイズもできそうなので今後実プロダクトで使ってみたい。