How to draw a pie chart using react bootstrap ?
A Pie Chart, a circular statistical plot, visually represents a single series of data where each slice’s area corresponds to the percentage it represents in the overall data, providing an intuitive visualization of proportional relationships.
Prerequisites:
Approach to create Pie Chart:
This React component uses the “react-chartjs-2” library to render a Pie chart displaying hours studied on different weekdays. The sample data includes labels for weekdays, corresponding study hours, and background colors for each segment, providing a simple visualization within an MDBContainer component from “mdbreact.”
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 install --save mdbreact react-chartjs-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": {
"mdbreact": "^5.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"recharts": "^2.10.1",
"web-vitals": "^2.1.4",
}
Example: Now write down the following code in the App.js file
Javascript
import React from "react" ; import { MDBContainer } from "mdbreact" ; import { Pie } from "react-chartjs-2" ; const App = () => { // Sample data const data = { labels: [ "Monday" , "Tuesday" , "Wednesday" , "Thursday" , "Friday" ], datasets: [ { label: "Hours Studied in w3wiki" , data: [2, 5, 6, 7, 3], backgroundColor: [ "blue" , "green" , "yellow" , "pink" , "orange" ], } ] } return ( <MDBContainer> <Pie 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
Contact Us