PieChart

Description

A pie chart shows data as slices of pie. You can also display a pie chart as a donut.

You can use this to create a custom chart by providing your own data query (see DataChart for more info on queries) and, optionally, pie chart options for the chart.

Refer to the Charts Overview for a list of all charts available.

Usage

import { AnalyticsDashboard, PieChart } from "react-analytics-charts";

<AnalyticsDashboard
  authOptions={{ clientId }}
  renderCharts={(gapi, viewId) => {
    return (
      <PieChart
        gapi={gapi}
        query={{
          ids: viewId,
          "start-date": "30daysAgo",
          "end-date": "today",
          metrics: "ga:sessions,ga:users,ga:pageviews",
          dimensions: "ga:deviceCategory",
        }}
        container="traffic-by-device-category-chart"
        options={{
          title: "Traffic By Device Category (30 Days)",
        }}
      />
    );
  }}
/>

Props

Prop	Type	Description
gapi	`GoogleAnalyticsEmbedAPI`	Required. The ready and authorized Google Analytics Embed API
container	`string`	Required. Provide an ID for the `div` that will contain the chart.
query	`Query`	Required. The `Query` for the Analytics data. See the Query Prop section of DataChart.
donut	`boolean`	Optional. When `true`, the pie chart will become a donut chart, using an aesthetically pleasing golden ratio `pieHole` of `0.382`. Default `false`.
options	`PieChartOptions`	Optional. Options for the chart. To determine what to use here, refer to the Configuration Options section for pie charts.

This component also supports all div props, such as className, style, and onClick.

If you have more than one of this chart on the page, be sure to specify a unique container ID.

Query

Refer to DataChart Query Prop to build your own data query.

Chart Options

There are numerous chart options available for pie charts, allowing you to customize the appearance. Provide these via the options prop.

Below are a few of the notable ones:

Option	Type	Description
title	`string`	Text to display above the chart.
width	`number` \| `string`	Width of the chart, in pixels. Also supports a percentage string. Default: `100%`
height	`number` \| `string`	Height of the chart, in pixels.
is3D	`boolean`	If `true`, displays a three-dimensional chart. Default: `false`
pieHole	`number`	If between `0` and `1`, displays a donut chart. The hole with have a radius equal to number times the radius of the chart. Default: `0`
pieSliceText	`string`	The content of the text displayed on the slice. Can be one of the following: `'percentage'` - The percentage of the slice size out of the total. `'value'` - The quantitative value of the slice. `'label'` - The name of the slice. `'none'` - No text is displayed. Default: `'percentage'`

The containing element is rendered as a div and you can size and style it as you see fit using CSS.

See all chart options.

Donut Chart Example

<AnalyticsDashboard
  authOptions={{ clientId }}
  dashId="donut"
  renderCharts={(gapi, viewId) => {
    return (
      <PieChart
        gapi={gapi}
        query={{
          ids: viewId,
          "start-date": "30daysAgo",
          "end-date": "today",
          metrics: "ga:sessions",
          dimensions: "ga:source",
        }}
        container="donut-traffic-by-device-category-chart"
        donut
        options={{
          title: "Traffic By Source (30 Days)",
        }}
      />
    );
  }}
/>

3D Chart Example

<AnalyticsDashboard
  authOptions={{ clientId }}
  dashId="3d-pie"
  renderCharts={(gapi, viewId) => {
    return (
      <PieChart
        gapi={gapi}
        query={{
          ids: viewId,
          "start-date": "30daysAgo",
          "end-date": "today",
          metrics: "ga:pageviews",
          dimensions: "ga:pagePath",
        }}
        container="3d-pie-pageviews-per-path-chart"
        options={{
          title: "Pageviews Per Path (30 Days)",
          is3D: true,
        }}
      />
    );
  }}
/>