React Recharts.

In this article, I will explain about Recharts. We can show the different type of data using different type of Recharts. Using these charts we can better way to present data.

What are the various type charts:

• AreaChart
• BarChart
• LineChart
• ComposedChart
• PieChart
• Rader Chart
• RadialBarChart
• ScatterChart
• Treemap

Example:

In this example, I used LineChart only rest of the charts are as easy as this.

import React, { Component } from "react";
import {
  LineChart,
  CartesianGrid,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  Line,
  ComposedChart,
  Area,
  Bar
} from "recharts";
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
  }
];
class App extends Component {
  render() {
    return (
      <div className="App">
        <header>
          <h1>Re Charts</h1>
        </header>
        <h2 style={{ textAlign: "left" }}>Line Chart</h2>
        <LineChart
          width={730}
          height={250}
          data={data}
          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="pv" stroke="#8884d8" />
          <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
        </LineChart>
      </div>
    );
  }
}
export default App;

recharts

I hope it will help you. Thank you for reading.

http://recharts.org/en-US