How to Create Pie / Donut Chart in React with Google Charts

Last Updated on March 4, 2024 by Digamber in React JS

React donut chart tutorial; Graphs and charts play a massive role in illustrating complex data.

Charts help you understand the data. You can eloquently describe the information in numerical terms with the help of charts.

In this guide, we will help you understand how to create Pie chart in React application.

To build the Pie chart in React, we will take the help of the Google charts library.

Google charts offer a JavaScript-based charts plugin that helps you create any chart within a shorter time.

Pie charts display a parts-to-whole relationship for categorical or nominal data. Every slice in the pie ideally describes percentages of the whole.

React Js Pie / Donut Chart with Google Charts Example

• Step 1: Build React Project
• Step 2: Install Bootstrap Package
• Step 3: Add Google Charts Library
• Step 4: Create Pie Chart Component
• Step 5: Update App Js
• Step 6: Start Application

Build React Project

In the first step, we will show you how to build a new React project.

Here is the command that needs to be executed from command prompt.

npx create-react-app react-chart

After using the above command, move inside the project folder.

cd react-chart

Install Bootstrap Package

If you want to use custom CSS elements then you may install Bootstrap package.

npm install bootstrap --legacy-peer-deps

After that, go to App.js and import the bootstrap path in the file.

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

Add Google Charts Library

In this step, you have to install the React google charts package. You have to execute the provided command from the terminal.

npm install react-google-charts --legacy-peer-deps

Create Pie Chart Component

Next, create the components/ directory and the PieChart.js file.

You may use the Chart directive to define the pie chart, you may customize the donut chart based on the options provided by the plugin.

Insert given code in 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

Update App Js

Further, in the last step, we have to get into the App.js file.

In this file we have to import and register the pie chart component as given 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

Start Application

Finally, we need to run the application. It is easy to start the React app, just execute the suggested command.

npm start

Conclusion

In this tutorial, we have learned how to use React Google Charts library to build the Pie or Donut chart component in React.

However, you may also create a simple pie chart, 3d pie chart, rotating pie chart, and exploding pie chart. Click here to get the further assistance related to pie chart.