How to Create 3D PieChart (Google Chart) in React JS

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…

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

Video Tutorial