<LineChart width={700} height={300} data={data}>

    <XAxis dataKey="name"/>

    <YAxis/>

    <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>

    <Line type="monotone" dataKey="uv" stroke="#8884d8" />

    <Line type="monotone" dataKey="pv" stroke="#82ca9d" />

  </LineChart>

npm install recharts

​

yarn add recharts

 // Install

$ npm install recharts

  // Generate a simple chart by using plain javascript data (usually an array of objects).

  import { LineChart, Line } from 'recharts';

const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];

​

const renderLineChart = (

  <LineChart width={400} height={400} data={data}>

    <Line type="monotone" dataKey="uv" stroke="#8884d8" />

  </LineChart>

);

  <LineChart width={500} height={300} data={data}>

    <XAxis dataKey="name"/>

    <YAxis/>

    <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>

    <Line type="monotone" dataKey="uv" stroke="#8884d8" />

    <Line type="monotone" dataKey="pv" stroke="#82ca9d" />

  </LineChart>

<LineChart width={400} height={300} data={data}>

    <XAxis dataKey="name"/>

    <YAxis/>

    <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>

    <Line type="monotone" dataKey="uv" stroke="#8884d8" />

    <Line type="monotone" dataKey="pv" stroke="#82ca9d" />

  </LineChart>