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 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:
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 w3wiki" , 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:
Contact Us