Skip to main content

Pie Chart

Start by importing the Chart component :

import { Chart } from "react-google-charts";
Live Editor
function App() {
  const data = [
    ["Task", "Hours per Day"],
    ["Work", 9],
    ["Eat", 2],
    ["Commute", 2],
    ["Watch TV", 2],
    ["Sleep", 7],
  ];

  const options = {
    title: "My Daily Activities",
  };
  return (
    <Chart
      chartType="PieChart"
      data={data}
      options={options}
      width={"100%"}
      height={"400px"}
    />
  );
}
Result
Loading...

Edit chart example in CodeSandbox

High-Level Overview​

To render a Pie Chart, you need to provide the following props to the Chart component:

  • chartType: Set this to "PieChart" to specify the chart type.
  • data: Provide the chart data in a tabular format. First row containing the column definitions and subsequent rows the data.
  • options: (Optional) Customize the chart with various options like title, colors, and display settings.
  • width and height: (Optional) Define the size of the chart.

Basic Usage​

import React from "react";
import { Chart } from "react-google-charts";

const data = [
  ["Task", "Hours per Day"],
  ["Work", 11],
  ["Eat", 2],
  ["Commute", 2],
  ["Watch TV", 2],
  ["Sleep", 7],
];

// Optional
const options = {
  title: "My Daily Activities",
};

function App() {
  return <Chart chartType="PieChart" data={data} options={options} />;
}

export default App;

Examples​

Below are interactive examples of Pie Charts rendered using react-google-charts. Each example demonstrates different features and customization options. You can interact with the charts directly in your browser.

3D Pie Chart​

This example demonstrates how to create a 3D Pie Chart.

Live Editor
function App() {
  const data = [
    ["Task", "Hours per Day"],
    ["Work", 11],
    ["Eat", 2],
    ["Commute", 2],
    ["Watch TV", 2],
    ["Sleep", 7],
  ];

  const options = {
    title: "My Daily Activities",
    pieHole: 0.4, // Creates a Donut Chart. Does not do anything when is3D is enabled
    is3D: true, // Enables 3D view
    // slices: {
    //   1: { offset: 0.2 }, // Explodes the second slice
    // },
    pieStartAngle: 100, // Rotates the chart
    sliceVisibilityThreshold: 0.02, // Hides slices smaller than 2%
    legend: {
      position: "bottom",
      alignment: "center",
      textStyle: {
        color: "#233238",
        fontSize: 14,
      },
    },
    colors: ["#8AD1C2", "#9F8AD1", "#D18A99", "#BCD18A", "#D1C28A"],
  };
  return (
    <Chart
      chartType="PieChart"
      data={data}
      options={options}
      width={"100%"}
      height={"400px"}
    />
  );
}
Result
Loading...

Diff Pie Chart​

This example shows how to create a Diff Pie Chart to compare two sets of data.

Donut Chart​

You can create a Donut Chart by adding a hole to the center of the pie using the .

Exploding a Slice​

Learn how to "explode" or offset a slice from the pie chart for emphasis.

Removing Slices​

This example demonstrates how to remove slices below a certain threshold from the pie chart.

Rotating a Pie Chart​

Learn how to rotate the pie chart to start from a different angle.

Slice Visibility Threshold​

This example shows how to set a visibility threshold to group smaller slices into an "Other" category.

Customizing the Pie Chart​

You can customize various aspects of the Pie Chart using the options prop.

Styling Options​

Customize the chart's appearance:

const options = {
  title: "My Daily Activities",
  is3D: true, // Enables 3D view
  pieHole: 0.4, // Will be ignored if is3D is set to true
  slices: {
    1: { offset: 0.2 }, // Explodes the second slice
  },
  pieStartAngle: 10, // Rotates the chart
  sliceVisibilityThreshold: 0.02, // Hides slices smaller than 2%
  legend: {
    position: "bottom",
    alignment: "center",
  },
  colors: ["#AFCBFF", "#C2E0C6", "#D8A7B1", "#FFC107", "#D3D3D3"],
};

Exploding a Slice​

To emphasize a particular slice, you can "explode" it by setting an offset:

const options = {
  slices: {
    2: { offset: 0.2 }, // Explodes the third slice
  },
};

Rotating the Pie Chart​

Adjust the starting angle of the pie chart:

const options = {
  pieStartAngle: 135, // Rotates the chart by 135 degrees
};

Slice Visibility Threshold​

Group smaller slices into an "Other" category:

const options = {
  sliceVisibilityThreshold: 0.05, // Slices smaller than 5% will be grouped
};

Additional Resources​