Open In App

How to Create Horizontal bar chart using React Bootstrap ?

Last Updated : 10 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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;


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:

Output



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads