How to Create Bar Chart in React with Recharts Library

In this simple tutorial, we will teach you how to create a Bar graph chart React js component using the profound Recharts and Bootstrap packages.

A bar chart is a graphical representation of data that helps users to display the value per category or group of data.

It is generally used to show categorical data, such as the number of items in each category or the frequency of an event in different categories.

Bar charts are widely used GUI component, and it is one of the profound types of charts used to visualize the depth of the data.

You can use bar charts in React or any other framework to compare quantities, display changes over time, show frequency distribution, and highlighting outliers.

React Recharts Bar Chart Example

Here are the steps to help you implement the recharts bar chart component in React js.

• Step 1: Create React App
• Step 2: Install Recharts Module
• Step 3: Create Function Component
• Step 4: Build Bar Chart Component
• Step 5: Register Component in App Js
• Step 6: Run App on Browser

Create React App

To install a brand new React app, you require to have Node.js and npm installed on your development machine.

Once you have them installed, you can follow these steps:

Open your terminal or command prompt.

Navigate to the directory where you want to create your React app.

Run the following command to create a new React app:

npx create-react-app my-react-app

Use below command to enter into the project directory:

cd my-react-app

Install Recharts Module

The second step shows you how to install the Recharts and Bootstrap packages.

npm i recharts bootstrap

Create Function Component

Create the components/ directory within the src/ folder, and also create the the ReBarChart.js file.

import React from "react";
import {
  BarChart,
  Bar,
} from "recharts";
function ReBarChart() {
  return (
    <div>
       
    </div>
  );
}
export default ReBarChart;

We already added the BarChart, and Bar, modules from the “recharts” package in function component file.

Build Bar Chart Component

To create a bar chart using recharts concerning JavaScript, you can import the BarChart module and pass the demo data to the component.

Here’s an example of how to create a bar chart using Recharts:

Add the code in the components/ReBarChart.js file.

import React from "react";
import {
  BarChart,
  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,
  },
];
function ReBarChart() {
  return (
    <div>
      <BarChart width={450} height={350} data={data}>
        <Bar dataKey="uv" fill="#8884d8" />
      </BarChart>
    </div>
  );
}
export default ReBarChart;

Register Component in App Js

In order to process the bar chart component, we require to register the ReBarChart module in the main entry of our React project.

Open the src/App.js file, and define the given code:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ReBarChart from "./components/ReBarChart";
function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Js Rechart Bar Chart Customization Example</h2>
      <ReBarChart />
    </div>
  );
}
export default App;

Run App on Browser

Use the npm command to start the React application; this command will start the react server.

npm start

Your app will be served on:

http://localhost:3000

Also, on the terminal two testing url will be printed. You can use either of the url to view the app.

Summary

In this simple and short post, we have comprehended how to design bar chart component in React js application with the help of npm Recharts module.

We created a basic bar chart however Recharts offers various methods. Through which you can take customization to the next level.