Skip to main content

Pie Chart

React Google Charts provides several pie chart types, including simple, 3D, donut, and additional interactive chart features.

Usage​

Install the package​

npm i react-google-charts

Create your chart​

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

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

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

export function App() {
  return (
    <Chart
      chartType="PieChart"
      data={data}
      options={options}
      width={"100%"}
      height={"400px"}
    />
  );
}

Simple Example​

3D Pie Chart​

Diff Pie Chart​

Donut Chart​

Exploding a slice​

Removing Slices​

Rotating A Pie Chart​

Slice Visibility Threshold​

Read More​