Hello All, In the last React JS topic we had discussed How to Create Line Chart (Google Chart) in React JS. Now, In this topic, We will move one step ahead to learn How to Create 3D PieChart (Google Chart) in React JS
We will follow almost similar steps which we had followed in the Line Chart example. Just need to change a few things that will discuss further in the post.
So, Let’s Start…
Table of Contents
How to Create 3D PieChart (Google Chart) in React JS Example
- Step 1: Create a new react js project
- Step 2: Install npm dependency
- Step 3: Create a separate component & Write the logic
- Step 4: Import Chart Component
- Step 5: Run & See the Output
Step 1: Create a new react js project
To Create 3D PieChart Example in React JS, We will create a new project using the following command
npx create-react-app myapp
Now, Go to our newly created project path using the below command
cd myapp
Open the newly created project in Visual Studio Code using the below command
code .
Step 2: Install npm dependency
Now, We need to install google chart npm dependency using the below command
npm i react-google-charts
Step 3: Create a separate component & Write the logic
We will create a separate component folder named components. Now, Create a new file PieChart.js under the components folder.
Now, We will import Chart from react-google-charts
import Chart from "react-google-charts";
Update the PieChart.js as shown below
return (
<div>
<h1>
3D Pie Chart for Student marks in subjects
</h1>
<Chart
width={'500px'}
height={'500px'}
chartType="PieChart"
loader={<div>Loading Pie Chart</div>}
data={[
['Student', 'English', 'Maths', 'History', 'Geography'],
['A', 80, 70, 45, 87],
['B', 90, 47, 88, 90],
['C', 88, 67, 82, 95],
['D', 50, 70, 56, 63]
]}
options={{
title: 'Exam Performance',
is3D: true,
}}
/>
</div>
);
In the above code, We will make it 3D: true as we want to show a 3D PieChart in our example.
Complete PieChart.js is shown below
import React, { Component } from 'react';
import Chart from "react-google-charts";
class PieChart extends Component {
render() {
return (
<div>
<h1>
3D Pie Chart for Student marks in subjects
</h1>
<Chart
width={'500px'}
height={'500px'}
chartType="PieChart"
loader={<div>Loading Pie Chart</div>}
data={[
['Student', 'English', 'Maths', 'History', 'Geography'],
['A', 80, 70, 45, 87],
['B', 90, 47, 88, 90],
['C', 88, 67, 82, 95],
['D', 50, 70, 56, 63]
]}
options={{
title: 'Exam Performance',
is3D: true,
}}
/>
</div>
);
}
}
export default PieChart;
Step 4: Import Chart Component
Now, We will import the PieChart component in our App.js as shown below
import * as React from 'react';
import PieChart from "./components/PieChart";
import './App.css';
function App() {
return (
<PieChart />
);
}
export default App;
Step 5: Run & See the Output
We are done with the coding part. Now, We Just need to run the application in the browser & check the output.
Run the React application using the below command
npm start
Output

3D Pie Chart Output