list of configuration options for Google Pie Chart.
backgroundColor
a string or object. Default 'white'
. The
background color for the main area of the chart. Can be either a
simple HTML color string, for example: 'red'
or
'#00cc00'
, or an
object with the following properties.
backgroundColor.stroke
a string. Default '#666'
. The color of
the chart border, as an HTML color string.
backgroundColor.strokeWidth
a number. Default 0. The border
width, in pixels.
backgroundColor.fill
a string. Default 'white'
. The chart
fill color, as an HTML color string.
chartArea
A string. Default 'null'
. An object
with members to configure the
placement and size of the chart area (where the chart itself is drawn,
excluding axis and legends). Two formats are supported: a number, or a
number followed by %
. A simple number is a value in pixels; a number
followed by %
is a percentage. Example:
{left:20,top:0,width:\"50%\",height:\"75%\"}
chartArea.left
A number or string. Default auto. How far to draw
the chart from the left border.
chartArea.top
A number or string. Default auto. How far to
draw the chart from the top border.
chartArea.width
A number or string. Default auto. Chart
area width.
chartArea.height
A number or string. Default auto. Chart
area height.
colors
An array of strings. Default 'colors'. The colors to
use for the chart elements. An array of strings, where each element is
an HTML color string, for example: colors:['red','#004411']
.
fontSize
A number. Default automatic. The default font
size, in pixels, of all text in the chart. You can override this
using properties for specific chart elements.
fontName
A string. Default 'Arial'
. The default font face for
all text in the chart. You can override this using properties for
specific chart elements.
height
A number. Default height of the containing
element. Height of the chart, in pixels.
is3D
Boolean. Default FALSE
. If set to
TRUE
, displays a three-dimensional chart.
legend
a JSON object. Default NULL
.
An object with members to configure various aspects of the
legend. To specify properties of this object, you can use object
literal notation, as shown here:
{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
legend.position
a string. Default 'right'
. Position of the legend. Can
be one of the following:
'right'
To the right of the chart.
'top'
Above the chart.
'bottom'
Below the chart.
'none'
No legend is displayed.
legend.alignment
a string. Default
automatic. Alignment of the legend. Can be one of the following:
'start'
Aligned to the start of the area
allocated for the legend.
'center'
Centered in the area allocated for the
legend.
'end'
Aligned to the end of the area
allocated for the legend.
Start, center, and end are relative to the style –
vertical or horizontal – of the legend. For example, in a
'right' legend, 'start' and 'end' are at the top and bottom,
respectively; for a 'top' legend, 'start' and 'end' would be at
the left and right of the area, respectively.
The default value depends on the legend's position. For 'bottom'
legends, the default is 'center'; other legends default to
'start'.
legend.textStyle
a JSON object. Default
{color: 'black',
fontName: <global-font-name>, fontSize: <global-font-size>}
An object that specifies the legend text style. The object has this format:
{color: <string>, fontName: <string>, fontSize:
<number>}
The color can be any HTML color string, for example: 'red'
or
'#00cc00'
. Also see fontName
and fontSize
.
pieHole
a number. Default 0. If between 0 and
1, displays a donut chart. The hole with have a radius equal
to number times the radius of the chart.
pieSliceBorderColor
a string. Default 'white'
.
The color of the slices border.
pieSliceText
A string. Default 'percentage'.
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.
pieSliceTextStyle
A json object. Default
{color: 'black', fontName: <global-font-name>, fontSize:
<global-font-size>}.
An object that specifies the slice text
style. The object has this format:
{color: <string>, fontName: <string>, fontSize:
<number>}.
The color can be any HTML color string, for
example: 'red'
or '#00cc00'
. Also see fontName
and
fontSize
.
pieStartAngle
A number. Default 0. The angle, in
degrees, to rotate the chart by. The default of 0 will orient
the leftmost edge of the first slice directly up.
reverseCategories
Boolean. Default FALSE
. If
set to TRUE
, will draw slices counterclockwise. The
default is to draw clockwise.
sliceVisibilityThreshold
A number. Default
1/720. The slice relative part, below which a slice will not
show individually. All slices that have not passed this
threshold will be combined to a single slice, whose size is the
sum of all their sizes. Default is not to show individually any
slice which is smaller than half a degree.
pieResidueSliceColor
A string. Default
'#ccc'
. Color for the combination slice that holds all
slices below sliceVisibilityThreshold
.
pieResidueSliceLabel
A string. Default 'Other'
. A
label for the combination slice that holds all slices below
sliceVisibilityThreshold
.
slices
a JOSN array of objects, or object with
nested objects. Default
{}.
A JSON array of objects, each
describing the format of the corresponding slice in the pie. To
use default values for a slice, specify an empty object
{}.
If a
slice or a value is not specified, the global value will be
used. Each object supports the following properties:
color
The color to use for this slice. Specify a
valid HTML color string.
- codeoffset
How far to separate the slice from the
rest of the pie, from 0.0 (not at all) to 1.0 (the pie's
radius).
textStyle
Overrides the global pieSliceTextSlice
for this slice.
You can specify either an array of objects, each of which applies
to the slice in the order given, or you can specify an object
where each child has a numeric key indicating which slice it
applies to. For example, the following two declarations are
identical, and declare the first slice as black and the fourth as
red:
slices: [{color: 'black', {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
sliceVisibilityThreshold
a number. Default
1/720. The slice relative part, below which a slice will not show
individually. All slices that have not passed this threshold will
be combined to a single slice, whose size is the sum of all their
sizes. Default is not to show individually any slice which is
smaller than half a degree.
title
A string. Default no title. Text to display above the chart.
titleTextStyle
A json object. Default
{color:'black', fontName:<global-font-name>,fontSize:<global-font-size>}.
An
object that specifies the title text
style. The object has this format:
{color: <string>, fontName: <string>, fontSize: <number>}
The color can be any HTML color string, for example: 'red'
or
'#00cc00'
. Also see fontName
and fontSize
.
tooltip
a JSON object. Default NULL
.
An object with members to configure various tooltip elements. To
specify properties of this object, you can use object
literal notation, as shown here:
{textStyle: {color: '#FF0000'}, showColorCode: true}
tooltip.showColorCode
boolean. Default automatic.
If true, show colored squares next to the series information in
the tooltip. The default is true when focusTarget
is set to
'category'
, otherwise the default is FALSE
.
tooltip.textStyle
a JSON object. Default
{color: 'black',
fontName: <global-font-name>, fontSize: <global-font-size>}
An object that specifies the tooltip text style. The object has this format:
{color: <string>, fontName: <string>, fontSize: <number>}
The color can be any HTML color string, for example: 'red'
or
'#00cc00'
. Also see fontName
and fontSize
.
tooltip.trigger
-
The user interaction that causes the tooltip to be displayed:
'hover'
The tooltip will be displayed when the user hovers over an element.
'none'
The tooltip will not be displayed.
width
A number. Default width of the containing
element. Width of the chart, in pixels.