How to Create Horizontal bar chart using React Bootstrap ?

A bar chart represents categorical data with corresponding data values as rectangular bars. Usually, the x-axis represents categorical values and the y-axis represents the data values or frequencies. This is called a vertical bar chart and the inverse is called a horizontal bar chart. In some cases, a horizontal bar chart provides better readability.

Prerequisites:

• React JS
• React Bootstrap
• Bar chart

Approach:

To create a horizontal bar chart using react-bootstrap we will use MDBReact and react charts libraries. The bar chart container will be used from mdbreact to enclose the horizontal chart component of the react charts.

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the required modules using the following command.

npm i --save mdbreact [email protected]

Step 4: Add Bootstrap CSS and fontawesome CSS to index.js.

import '@fortawesome/fontawesome-free/css/all.min.css';  
import 'bootstrap-css-only/css/bootstrap.min.css';  
import 'mdbreact/dist/css/mdb.css';

Project Structure:

The Updated dependencies in package.json file will look like.

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "bootstrap": "^5.3.2",
        "mdbreact": "^5.2.0",
        "react": "^18.2.0",
        "react-chartjs-2": "2.11.2",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
}

Example: This example uses Horizonal Bar component form react-chartjs-2 to implement horizontal bar chart.

// Filename - App.js

import React from "react";
import { MDBContainer } from "mdbreact";
import { HorizontalBar } from "react-chartjs-2";

const App = () => {
    // Sample data
    const data = {
        labels: [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
        ],
        datasets: [
            {
                label: "Hours Studied in Geeksforgeeks",
                data: [2, 5, 7, 9, 7, 6, 4],
                fill: true,
                backgroundColor: "rgba(6, 156,51, .3)",
                borderColor: "#02b844",
            },
        ],
    };

    return (
        <MDBContainer>
            <HorizontalBar data={data} />
        </MDBContainer>
    );
};

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: