Rechartsを使ってReactにグラフ描画をする

Reactアプリを勉強中でグラフを描画したいと思い、いろいろ探していたところRechartsというライブラリがあったので使ってみた。

公式サイト

• Recharts
• github

はじめに

create-react-appでアプリを作成

create-react-app recharts-app
cd recharts-app

rechartsをインストール

npm install recharts

グラフを描画

単純な折れ線グラフを描画

App.js

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

import './App.css';

const data = [
  {name: 'Page A', uv: 4000},
  {name: 'Page B', uv: 3000},
  {name: 'Page C', uv: 2000},
  {name: 'Page D', uv: 2780},
  {name: 'Page E', uv: 1890},
  {name: 'Page F', uv: 2390},
  {name: 'Page G', uv: 3490},
]

class App extends Component {
  render() {
    return (
        <LineChart width={400} height={400} data={data}>
        <Line type="monotone" dataKey="uv" stroke="#8884d8" />
        </LineChart>
    );
  }
}

export default App;

npm startをすると折れ線グラフが描画されました。

公式のExamplesにいろいろ載っていました。