Pie Chart Configuration

NameTypeDefaultDescription
backgroundColor string or object '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 string '#666' The color of the chart border, as an HTML color string.
backgroundColor.strokeWidth number 0 The border width, in pixels.
backgroundColor.fill string 'white' The chart fill color, as an HTML color string.
chartArea Object 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: chartArea:{left:20,top:0,width:"50%",height:"75%"}
chartArea.left number or string auto How far to draw the chart from the left border.
chartArea.top number or string auto How far to draw the chart from the top border.
chartArea.width number or string auto Chart area width.
chartArea.height number or string auto Chart area height.
colors 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'].
enableInteractivity boolean true Whether the chart throws user-based events or reacts to user interaction. If false, the chart will not throw 'select' or other interaction-based events (but will throw ready or error events), and will not display hovertext or otherwise change depending on user input.
fontSize number automatic The default font size, in pixels, of all text in the chart. You can override this using properties for specific chart elements.
fontName string 'Arial' The default font face for all text in the chart. You can override this using properties for specific chart elements.
forceIFrame boolean false Draws the chart inside an inline frame. (Note that on IE8, this option is ignored; all IE8 charts are drawn in i-frames.)
height number height of the containing element Height of the chart, in pixels.
is3D boolean false If true, displays a three-dimensional chart.
legend Object 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.alignment string 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.position string 'right' Position of the legend. Can be one of the following:
  • 'bottom' - Displays the legend below the chart.
  • 'labeled' - Draws lines connecting slices to their data values.
  • 'left' - Displays the legend left of the chart.
  • 'none' - Displays no legend.
  • 'right' - Displays the legend right of the chart.
  • 'top' - Displays the legend above the chart.
legend.maxLines number 1

Maximum number of lines in the legend. Set this to a number greater than one to add lines to your legend. Note: The exact logic used to determine the actual number of lines rendered is still in flux.

This option currently works only when legend.position is 'top'.

legend.textStyle Object {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>,
  bold: <boolean>,
  italic: <boolean> }

The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

pieHole number 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 string 'white' The color of the slice borders. Only applicable when the chart is two-dimensional.
pieSliceText string '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 Object {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 Number 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 false If true, draws slices counterclockwise. The default is to draw clockwise.
pieResidueSliceColor string '#ccc' Color for the combination slice that holds all slices below sliceVisibilityThreshold.
pieResidueSliceLabel string 'Other' A label for the combination slice that holds all slices below sliceVisibilityThreshold.
slices Array of objects, or object with nested objects {}

An 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 (i.e., {}). 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.
  • offset - 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 number 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 string no title Text to display above the chart.
titleTextStyle Object {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>,
  bold: <boolean>,
  italic: <boolean> }

The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

tooltip Object 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 false If true, show colored squares next to the slice information in the tooltip.
tooltip.text string 'both'

What information to display when the user hovers over a pie slice. The following values are supported:

  • 'both' - [Default] Display both the absolute value of the slice and the percentage of the whole.
  • 'value' - Display only the absolute value of the slice.
  • 'percentage' - Display only the percentage of the whole represented by the slice.
tooltip.textStyle Object {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>,
  bold: <boolean>,
  italic: <boolean> }

The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

tooltip.trigger string 'focus'

The user interaction that causes the tooltip to be displayed:

  • 'focus' - The tooltip will be displayed when the user hovers over an element.
  • 'none' - The tooltip will not be displayed.
width number width of the containing element Width of the chart, in pixels.
Have more questions? Submit a request

Comments

Powered by Zendesk