React Tutorial- How To Create Pie/Donut Chart In React App Example

React Example-  Learn To Create Pie/Donut Chart In React App

React Donut Chart Tutorial– Graphs and charts play quite an important role in illustrating complex data. It becomes very simple to understand the numerical terms with the help of graphs or charts.

 

In this guide, we will get to know how to integrate a Pie Chart in React apps. We have to take the help of Google Charts library for this. Since Google charts offer a Javascript-based charts plugin that would help in creating the charts in a few moments.

Most of us already know that a pie chart presents the categorical or nominal data by presenting the percentage of its whole.

 

React Js Pie/Donut Chart With Google Charts Example

Step 1-Build React Project

Step 2- Install Bootstrap Package

Step3- Add Google Charts Library

Step 4- Create Pie Chart Component

Step 5- Update App Js

Step 6- Start The Application

 

Let’s learn in detail now:

Step 1- Build React Project

If you are a novice in creating the React app, then you have to follow this step by simply installing a new React app by using the below command:

npx create-react-app react-chart

 

Now, we have to move inside the project folder:

cd react-chart

 

Step 2- Install Bootstrap Package

So here, we simply need to install the bootstrap package if we want to use the custom CSS elements:

npm install bootstrap

Afterward, we go to App.js and import the bootstrap path in the file:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Step 3- Add Google Charts Library

As it’s already clear that we have to install the google charts package in this step for which, we will use the given command from the terminal:

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 4- Create Pie Chart Component

Here, we will learn to use Google Charts.

Firstly, we need to create the components/ directory and the PieChart.js file.

We can also use the Chart directive to define the Pie Chart. We may customize the donut Chart based on the option offered by the plugin.

Further, we insert the given code in the components/PieChart.js file:

import React, { Component } from 'react'
import Chart from 'react-google-charts'
const pieData = [
  ['Task', 'Hours per Day'],
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', 7],
]
const pieOptions = {
  title: 'My Daily Activities',
  pieHole: 0.4,
}
class PieChart extends Component {
  render() {
    return (
      <div className="container mt-5">
        <h2>React Donut Chart Example</h2>
        <Chart
          width={'600px'}
          height={'320px'}
          chartType="PieChart"
          loader={<div>Loading Chart</div>}
          data={pieData}
          options={pieOptions}
          rootProps={{ 'data-testid': '3' }}
        />
      </div>
    )
  }
}
export default PieChart

 

Step 5- Update App JS

Next, we need to get into the App.js file.

Then, we will import and register the Pie Chart component as shown below:

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import PieChart from './components/PieChart'
function App() {
  return (
    <div className="App">
      <PieChart />
    </div>
  )
}
export default App

 

Step 5-RStart The Application 

For running the React app, we have to use the below-given command in the terminal:

npm start

 

Conclusion

So, friends, hope that this tutorial seemed quite easy and smooth to you. In a few steps only, we have tried to explain everything about using React Google Charts library for building the Pie/Donut Chart component in React app.

 

Thanks