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>
          loader={<div>Loading Chart</div>}
          rootProps={{ 'data-testid': '3' }}
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 />
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



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.



Leave a Reply

Your email address will not be published. Required fields are marked *