React Recharts

Hello Fellow Developers in this article we are going to discuss about react Recharts. It is a react library that helps maintain data in chart format in react.

Use following command to install Recharts in your project.

npm install recharts

After installing Recharts in your project you can create different type of data charts to maintain you data. There are lots of different type of chart options available with recharts we will be using Bar Chart example for this article : –

import './App.css';
import { BarChart, Bar, CartesianGrid, XAxis, YAxis } from 'recharts';
function App() {
  const data = [
    { name: 'Oscar Career Point', students: 400 },
    { name: 'Technical scripter', students: 700 }
  ];
  const barColors = ["white", "black"]
  return (
    <div className="App">
      <BarChart width={600} height={600} data={data}>
        <Bar dataKey="students" fill= {barColors[1]} />
        <CartesianGrid stroke="#ccc" />
        <XAxis dataKey="name" />
        <YAxis />
      </BarChart>
    </div>
  );
}

export default App;

Now the your output should look like following :-

More fields can be added dynamically as well as we can also color our charts dynamically.