How to Create Horizontal bar chart using React Bootstrap ?

Last Updated : 10 Nov, 2023

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:

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 react-chartjs-2@v2.11.2

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:

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.

Javascript

// 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;