Charts

If you want to render Recharts component like the following images. The configurations are given in the

Simple LineChart

To show this type of LineChart you will need this code in down here.

     
<ResponsiveContainer width="100%" height={200}>
    <LineChart data={data}
               margin={{top: 10, right: 0, left: -25, bottom: 0}}>
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="pv" stroke="#3367d6" activeDot={{r: 8}} />
        <Line type="monotone" dataKey="uv" stroke="#ffc658" />
    </LineChart>
</ResponsiveContainer>
  

Bar Chart

<ResponsiveContainer width="100%" height={200}>
    <BarChart data={data}
              margin={{top: 10, right: 0, left: -25, bottom: 0}}>
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Legend />
        <Bar dataKey="pv" fill="#3367d6" />
        <Bar dataKey="uv" fill="#ffc658" />
    </BarChart>
</ResponsiveContainer>

Area Chart

<ResponsiveContainer width="100%" height={200}>
    <AreaChart data={data}
               margin={{top: 10, right: 0, left: -25, bottom: 0}}>
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Area type='monotone' dataKey='uv' stroke='#3367d6' fill='#3367d6' />
    </AreaChart>
</ResponsiveContainer>

Two Level Pie Chart

<ResponsiveContainer width="100%" height={300}>
    <PieChart>
        <Pie dataKey="value" data={data01} outerRadius={60} fill="#3367d6" />
        <Pie dataKey="value" data={data02} innerRadius={70} outerRadius={90} fill="#ffc658"
             label />
    </PieChart>
</ResponsiveContainer>