text: import React, { Component } from 'react';
  import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
  import { curveCardinal } from 'd3-shape'
  
  const data = [
    {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
    {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
    {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
    {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
    {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
    {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
    {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
  ];
  
  const cardinal = curveCardinal.tension(0.2);
  
  export default class Example extends Component {
    static jsfiddleUrl = 'https://jsfiddle.net/alidingling/xujpnxxp/';
  
    render () {
      return (
        <AreaChart width={600} height={400} data={data}
          margin={{top: 10, right: 30, left: 0, bottom: 0}}>
          <CartesianGrid strokeDasharray="3 3"/>
          <XAxis dataKey="name"/>
          <YAxis/>
          <Tooltip/>
          <Area type='monotone' dataKey='uv' stroke='#8884d8' fill='#8884d8' fillOpacity={0.3}/>
          <Area type={cardinal} dataKey='uv' stroke='#82ca9d' fill='#82ca9d' fillOpacity={0.3}/>
        </AreaChart>
      );
    }
  };
  