Use Rechart to Draw Any Type Of Chart Using React.JS

Sometimes, we need to display an overview chart in the dashboard section. For this purpose, we can utilize the Recharts website to create visually appealing charts using React.

Let's Start... 😊

First, create your react project. Then go to the recharts website (https://recharts.org/en-US/guide).

Install Recharts:

npm install recharts

Then create a file where you write your code. I've made a file/component named 'Chart.jsx'. Now, add packages and write the code as provided.

Chart Component:

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const Chart = () => {
    const marks = [
        {
          "ID": 1,
          "Name": "Alice",
          "Math": 85,
          "Physics": 90,
          "Chemistry": 88
        },
        {
          "ID": 2,
          "Name": "Bob",
          "Math": 78,
          "Physics": 82,
          "Chemistry": 79
        },
        {
          "ID": 3,
          "Name": "Charlie",
          "Math": 92,
          "Physics": 88,
          "Chemistry": 95
        },
        {
          "ID": 4,
          "Name": "David",
          "Math": 76,
          "Physics": 85,
          "Chemistry": 80
        }
      ]

    return (
        <div>
            <LineChart width={500} height={200} data={marks}>
                {/* Math, Physics, Name are text.   */}
                <Line dataKey="Physics"></Line>
                <Line dataKey="Math" stroke="#8884d8"></Line>
                <XAxis dataKey="Name"></XAxis>
                <YAxis></YAxis>
                <Tooltip></Tooltip>
            </LineChart>
        </div>
    );
};

export default Chart;

App Component:

Add the component in the 'App.jsx' file.

import './App.css'
import Chart from './Chart'

function App() {

  return (
    <>
      <Chart></Chart>
    </>
  )
}

export default App

Output (Line Chart)

After running the code, the output displays a line chart.

Thanks for reading 🩵🥰