This document describes how to create pie charts using the Chart API.

Table of Contents

Overview

Pie charts are good for showing simple proportional part-to-whole information. You can create a single series pie chart, where each series is made of multiple slices, or multi-series, concentric charts.

Each series describes one pie, and each data value specifies one slice. When using nested pie charts (described below), use multiple series.

To display the text associated with a slice, you will have to use either pie chart labels or a chart legend. Pie chart labels are text around the chart with lines pointing toward the slice. Legends are text associated by color.

Labels	Legend	Labels and Legend
chl=January|February|March|April	chdl=January|February|March|April	chl=January|February|March|April chdl=30°|40°|50°|60°

Values are displayed relative to each other: so a chart with values 1,2,3 will look the same as a chart with values 100,200,300. However, when using text format data, values greater than 100 are trimmed to 100, so you will need to use text format with custom scaling to display slices greater than 100 properly (use the chds parameter with min/max values of chds=0,<max-slice-size>).

Negative values display as empty slices of the appropriate size.

Chart Types

There are three general types of pie charts that you can create: flat, concentric, or 3D. Specify a pie chart with the following syntax:

Syntax

cht=<chart_type>

Where <chart_type> is one of the the following types:

Parameter	Description	Example
p	Two dimensional pie chart. Supply one data series only; subsequent data series are ignored. By default, pie segment colors are interpolated from dark orange to pale yellow. Specify other colors as described in Series Colors. Specify labels with chl as described in Pie chart labels. The Google Chart API calculates the circle's radius from the minimum of width and height specified in the chart size (chs) parameter. If you are including labels, you probably need to specify the size of the width to be twice the size of the height, to ensure that your labels are fully visible.	cht=p chs=200x100
p3	A three-dimensional pie chart. Specify data and formatting in the same way as for two dimensional pie charts, above. If you are including labels in a three-dimensional pie chart, you probably need to specify the size of the width to be 2.5 times the size of the height, to ensure that your labels are fully visible.	cht=p3 chs=250x100
pc	A concentric pie chart. Supply two or more data series.	cht=pc chd=s:Helo,Wrld
All types	Negative numbers in data cause "blank" slices.	cht=pc chd=t: 10,-10,10,-10| 5,-5,5,-5,5,-5,5,-5,5,-5

Series Colors chco

You can specify the colors of all values, each value, or some values using the chco parameter.

Syntax

chco=<slice_1>|<slice_2>|<slice_n>,<series_color_1>,...,<series_color_n>

<color>

Slice colors in RRGGBB hexadecimal format. Specify a single series color and all slices in that series will be colored in gradations of that color from darkest (first data member) to lightest (last data member). Specify two or more colors delimited by a | to describe individual slice colors. When you have multiple series (that is, a chart with concentric rings), you can specify values for different series by separating values by a comma. When fewer slice/series colors are given than slices/series displayed, then the chart will cycle through from the beginning of the slice list for the series, or the series list for the chart. You cannot specify a distinct gradient for each series in a multi-series chart.

Description	Example
Specify a single color to have gradations from darkest (first slice) to lightest (last slice).	chco=0000FF
Defining a gradient; here, from yellow to red.	chd=t:10,20,30,40,50 chco=FFFF10,FF0000
Defining individual slice colors; specify one color per slice.	chd=t:10,20,30 chco=FF0000|00FF00|0000FF
This chart has two data series, but specifies color as a single gradient across all slices from yellow to red (BBBB00—BB0000).	chco=BBBB00,BB0000
Here's a concentric chart that includes both series colors and individual slice colors. The chart has two concentric data series. In human-readable form, the colors are chco=green|red,blue|yellow. The comma breaks this into two series: green|red - Alternating green and red slices. blue|yellow - Alternating blue and yellow slices.	chd=s:eYY,ORVM chco=008800|880000,000088|888800

Back to top

Pie Chart Labels chl

You can specify labels for individual pie chart slices using the chl parameter. You can also display a legend with the same or different values, one legend entry per slice.

A Note on String Values: Only URL-safe characters are permitted in label strings. To be safe, you should URL-encode any strings containing characters not in the character set 0-9a-zA-Z. You can find a URL encoder here.

Syntax

chl=
  <label_value>|
    ...
  <label_value>

<label_value>

A string value to apply to a slice. Labels are applied consecutively to the data points in chd. If you have multiple series (for a concentric pie chart, for example), labels are applied to all points in all sequences, in the order specified in chd. Use a pipe delimiter ( | ) between each label. Specify a missing intervening value by using two consecutive pipe characters with no space between them: || . You do not need to label all slices.

Examples

Back to top

Pie Chart Rotation chp

By default, the first series is drawn starting at 3:00, continuing clockwise around the chart, but you can specify a custom rotation using the chp parameter.

Syntax

chp=<radians>
  

<radians>

A floating point value describing how many radians to rotate the chart clockwise. One complete turn is 2π (2 pi—about 6.28) radians.

Examples

Description	Example
To change the orientation of a pie chart, use chp=<angle_in_radians>	chd=t:20,80 chd=t:80,20 chp=0.628
Here's another example of pie chart rotations. These can be combined with chart shape markers to create some interesting effects.

Back to top

Standard Features

The rest of the features on this page are standard chart features.