A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developers.google.com/apps-script/chart-configuration-options below:

Chart configuration options | Apps Script

Skip to main content Chart configuration options

Stay organized with collections Save and categorize content based on your preferences.

Chart Types Annotation chart configuration options Name 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'].

Type: Array of strings

Default: default colors

displayRangeSelector

Whether to show the zoom range selection area (the area at the bottom of the chart), where false means no.

The outline in the zoom selector is a log scale version of the first series in the chart, scaled to fit the height of the zoom selector.

Type: boolean

Default: true

displayZoomButtons

Whether to show the zoom buttons ("1d 5d 1m" and so on), where false means no.

Type: boolean

Default: true

max

The maximum value to show on the Y axis. If the maximum data point exceeds this value, this setting is ignored, and the chart is adjusted to show the next major tick mark above the maximum data point. This takes precedence over the Y axis maximum determined by scaleType.

This is similar to maxValue in core charts.

Type: number

Default: automatic

min

The minimum value to show on the Y axis. If the minimum data point is less than this value, this setting is ignored, and the chart is adjusted to show the next major tick mark below the minimum data point. This takes precedence over the Y axis minimum determined by scaleType.

This is similar to minValue in core charts.

Type: number

Default: automatic

Area chart configuration options Name areaOpacity

The default opacity of the colored area under an area chart series, where 0.0 is fully transparent and 1.0 is fully opaque. To specify opacity for an individual series, set the areaOpacity value in the series property.

Type: number, 0.0- 1.0

Default: 0.3

backgroundColor

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.

Type: string or object

Default: 'white'

backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string

Default: 'white'

chartArea

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%'}

Type: object

Default: null

chartArea.backgroundColor

Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided:

Type: string or object

Default: 'white'

chartArea.height

Chart area height.

Type: number or string

Default: auto

chartArea.left

How far to draw the chart from the left border.

Type: number or string

Default: auto

chartArea.top

How far to draw the chart from the top border.

Type: number or string

Default: auto

chartArea.width

Chart area width.

Type: number or string

Default: auto

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'].

Type: Array of strings

Default: default colors

hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

Type: object

Default: null

hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

hAxis.logScale

hAxis property that makes the horizontal axis a logarithmic scale (requires all values to be positive). Set to true for yes.

This option is only supported for a continuous axis.

Type: boolean

Default: false

hAxis.maxValue

Moves the max value of the horizontal axis to the specified value; this will be rightward in most charts. Ignored if this is set to a value smaller than the maximum x-value of the data. hAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval) and the minimum required space (see hAxis.minorGridlines.minSpacing).

Type: number

Default: 1

hAxis.minValue

Moves the min value of the horizontal axis to the specified value; this will be leftward in most charts. Ignored if this is set to a value greater than the minimum x-value of the data. hAxis.viewWindow.min overrides this property.

Type: number

Default: automatic

hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

hAxis.textStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string

Default: null

hAxis.titleTextStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object

Default: null

hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

interpolateNulls

Whether to guess the value of missing points. If true, it will guess the value of any missing data based on neighboring points. If false, it will leave a break in the line at the unknown point.

This is not supported by Area charts with the isStacked: true/'percent'/'relative'/'absolute' option.

Type: boolean

Default: false

isStacked

If set to true, stacks the elements for all series at each domain value. Note: In Column, Area, and SteppedArea charts, Google Charts reverses the order of legend items to better correspond with the stacking of the series elements (E.g. series 0 will be the bottom-most legend item). This does not apply to Bar Charts.

The isStacked option also supports 100% stacking, where the stacks of elements at each domain value are rescaled to add up to 100%.

The options for isStacked are:

For 100% stacking, the calculated value for each element will appear in the tooltip after its actual value.

The target axis will default to tick values based on the relative 0-1 scale as fractions of 1 for 'relative', and 0-100% for 'percent' (Note: when using the 'percent' option, the axis/tick values are displayed as percentages, however the actual values are the relative 0-1 scale values. This is because the percentage axis ticks are the result of applying a format of "#.##%" to the relative 0-1 scale values. When using isStacked: 'percent', be sure to specify any ticks/gridlines using the relative 0-1 scale values). You can customize the gridlines/tick values and formatting using the appropriate hAxis/vAxis options.

100% stacking only supports data values of type number, and must have a baseline of zero.

Type: boolean/string

Default: false

legend

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}}

Type: object

Default: null

legend.position

Position of the legend. Can be one of the following:

Type: string

Default: 'right'

legendTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

lineWidth

Data line width in pixels. Use zero to hide all lines and show only the points. You can override values for individual series using the series property.

Type: number

Default: 2

pointShape

The shape of individual data elements: 'circle', 'triangle', 'square', 'diamond', 'star' or 'polygon'. See the points documentation for examples.

Type: string

Default: 'circle'

pointSize

Diameter of displayed points in pixels. Use zero to hide all points. You can override values for individual series using the series property.

Type: number

Default: 0

reverseCategories

If set to true, draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean

Default: false

series

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used. Each object supports the following properties:

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    

Type: Array of objects, or object with nested objects

Default: {}

subtitle

Text to display below the chart title.

Type: string

Default: no title

subtitleTextStyle

An object that specifies the title text style.

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

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

theme

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

Type: string

Default: null

title

Text to display above the chart.

Type: string

Default: no title

titleTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

treatLabelsAsText

If set to true, the chart will treat the column as a text column.

Type: boolean

useFirstColumnAsDomain

If set to true, the chart will treat the column as the domain.

Type: boolean

vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis. These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex, then configure the axis using vAxes. The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    

Type: Array of object, or object with child objects

Default: null

vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

Type: object

Default: null

vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

vAxis.logScale

If true, makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean

Default: false

vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object

Default: null

vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number

Default: 1

vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number

Default: null

vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

vAxis.textStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.title

Specifies a title for the vertical axis.

Type: string

Default: no title

vAxis.titleTextStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object

Default: null

vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

Bar chart configuration options Name backgroundColor

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.

Type: string or object

Default: 'white'

backgroundColor.fill

The chart fill color, as an HTML color string.

Type:string

Default: 'white'

chartArea

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%'}

Type: object

Default: null

chartArea.backgroundColor

Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided:

Type: string or object

Default: 'white'

chartArea.height

Chart area height.

Type: number or string

Default: auto

chartArea.left

How far to draw the chart from the left border.

Type: number or string

Default: auto

chartArea.top

How far to draw the chart from the top border.

Type: number or string

Default: auto

chartArea.width

Chart area width.

Type: number or string

Default: auto

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'].

Type: Array of strings

Default: default colors

hAxes

Specifies properties for individual horizontal axes, if the chart has multiple horizontal axes. Each child object is a hAxis object, and can contain all the properties supported by hAxis. These property values override any global settings for the same property.

To specify a chart with multiple horizontal axes, first define a new axis using series.targetAxisIndex, then configure the axis using hAxes. The following example assigns series 1 to the bottom axis and specifies a custom title and text style for it:

series:{1:{targetAxisIndex:1}}, hAxes:{1:{title:'Losses', textStyle:{color: 'red'}}}

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the hAxis object shown above:

hAxes: {
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {
      color: 'red'
    }
  } // Axis 1
    

Type: Array of object, or object with child objects

Default: null

hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

Type: object

Default: null

hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

hAxis.logScale

hAxis property that makes the horizontal axis a logarithmic scale (requires all values to be positive). Set to true for yes.

This option is only supported for a continuous axis.

Type: boolean

Default: false

hAxis.maxValue

Moves the max value of the horizontal axis to the specified value; this will be rightward in most charts. Ignored if this is set to a value smaller than the maximum x-value of the data. hAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval) and the minimum required space (see hAxis.minorGridlines.minSpacing).

Type: number

Default: 1

hAxis.minValue

Moves the min value of the horizontal axis to the specified value; this will be leftward in most charts. Ignored if this is set to a value greater than the minimum x-value of the data. hAxis.viewWindow.min overrides this property.

Type: number

Default: automatic

hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

hAxis.textStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string

Default: null

hAxis.titleTextStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object

Default: null

hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

isStacked

If set to true, stacks the elements for all series at each domain value. Note: In Column, Area, and SteppedArea charts, Google Charts reverses the order of legend items to better correspond with the stacking of the series elements (E.g. series 0 will be the bottom-most legend item). This does not apply to Bar Charts.

The isStacked option also supports 100% stacking, where the stacks of elements at each domain value are rescaled to add up to 100%.

The options for isStacked are:

For 100% stacking, the calculated value for each element will appear in the tooltip after its actual value.

The target axis will default to tick values based on the relative 0-1 scale as fractions of 1 for 'relative', and 0-100% for 'percent' (Note: when using the 'percent' option, the axis/tick values are displayed as percentages, however the actual values are the relative 0-1 scale values. This is because the percentage axis ticks are the result of applying a format of "#.##%" to the relative 0-1 scale values. When using isStacked: 'percent', be sure to specify any ticks/gridlines using the relative 0-1 scale values). You can customize the gridlines/tick values and formatting using the appropriate hAxis/vAxis options.

100% stacking only supports data values of type number, and must have a baseline of zero.

Type: boolean/string

Default: false

legend

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}}

Type: object

Default: null

legend.position

Position of the legend. Can be one of the following:

Type: string

Default: 'right'

legendTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

reverseCategories

If set to true, draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean

Default: false

series

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used. Each object supports the following properties:

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    

Type: Array of objects, or object with nested objects

Default: {}

subtitle

Text to display below the chart title.

Type: string

Default: no title

subtitleTextStyle

An object that specifies the title text style.

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

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

theme

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

Type: string

Default: null

title

Text to display above the chart.

Type: string

Default: no title

titleTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

trendlines

Displays trendlines on the charts that support them. By default, linear trendlines are used, but this can be customized with the trendlines.n.type option.

Trendlines are specified on a per-series basis, so most of the time your options will look like this:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      visibleInLegend: true
    }
  }
}
    

Type: object

Default: null

trendlines.n.color

The color of the trendline , expressed as either an English color name or a hex string.

Type: string

Default: default series color

trendlines.n.degree

For trendlines of type: 'polynomial', the degree of the polynomial (2 for quadratic, 3 for cubic, and so on).

Type: number

Default: 3

trendlines.n.labelInLegend

If set, the trendline will appear in the legend as this string.

Type: string

Default: null

trendlines.n.lineWidth

The line width of the trendline, in pixels.

Type: number

Default: 2

trendlines.n.type

Whether the trendlines is 'linear' (the default), 'exponential', or 'polynomial'.

Type: string

Default: linear

trendlines.n.visibleInLegend

Whether the trendline equation appears in the legend. It will appear in the trendline tooltip.

Type: boolean

Default: false

useFirstColumnAsDomain

If set to true, the chart will treat the column as the domain.

Type: boolean

vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

Type: object

Default: null

vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

vAxis.logScale

If true, makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean

Default: false

vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object

Default: null

vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number

Default: 1

vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number

Default: null

vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

vAxis.textStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.title

Specifies a title for the vertical axis.

Type: string

Default: no title

vAxis.titleTextStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object

Default: null

vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

Bubble chart configuration options Name backgroundColor

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.

Type: string or object

Default: 'white'

backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string

Default: 'white'

bubble

An object with members to configure the visual properties of the bubbles.

Type: object

Default: null

bubble.opacity

The opacity of the bubbles, where 0 is fully transparent and 1 is fully opaque.

Type: number between 0.0 and 1.0

Default: 0.8

bubble.stroke

The color of the bubbles' stroke.

Type: string

Default: '#ccc'

bubble.textStyle

An object that specifies the bubble 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

chartArea

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%'}

Type: object

Default: null

chartArea.backgroundColor

Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided:

Type: string or object

Default: 'white'

chartArea.height

Chart area height.

Type: number or string

Default: auto

chartArea.left

How far to draw the chart from the left border.

Type: number or string

Default: auto

chartArea.top

How far to draw the chart from the top border.

Type: number or string

Default: auto

chartArea.width

Chart area width.

Type: number or string

Default: auto

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'].

Type: Array of strings

Default: default colors

hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

Type: object

Default: null

hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

hAxis.logScale

hAxis property that makes the horizontal axis a logarithmic scale (requires all values to be positive). Set to true for yes.

This option is only supported for a continuous axis.

Type: boolean

Default: false

hAxis.maxValue

Moves the max value of the horizontal axis to the specified value; this will be rightward in most charts. Ignored if this is set to a value smaller than the maximum x-value of the data. hAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval) and the minimum required space (see hAxis.minorGridlines.minSpacing).

Type: number

Default: 1

hAxis.minValue

Moves the min value of the horizontal axis to the specified value; this will be leftward in most charts. Ignored if this is set to a value greater than the minimum x-value of the data. hAxis.viewWindow.min overrides this property.

Type: number

Default: automatic

hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

hAxis.textStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string

Default: null

hAxis.titleTextStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object

Default: null

hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

legend

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}}

Type: object

Default: null

legend.position

Position of the legend. Can be one of the following:

Type: string

Default: 'right'

legendTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

series

An object of objects, where the keys are series names (the values in the Color column) and each object describing the format of the corresponding series in the chart. If a series or a value is not specified, the global value will be used. Each object supports the following properties:

Example:
series: {'Europe': {color: 'green'}}

Type: Object with nested objects

Default: {}

sizeAxis

An object with members to configure how values are associated with bubble size. To specify properties of this object, you can use object literal notation, as shown here:

 {minValue: 0,  maxSize: 20}

Type: object

Default: null

sizeAxis.maxSize

Maximum radius of the largest possible bubble, in pixels.

Type: number

Default: 30

sizeAxis.minSize

Minimum radius of the smallest possible bubble, in pixels.

Type: number

Default: 5

subtitle

Text to display below the chart title.

Type: string

Default: no title

subtitleTextStyle

An object that specifies the title text style.

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

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

theme

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

Type: string

Default: null

title

Text to display above the chart.

Type: string

Default: no title

titleTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

treatLabelsAsText

If set to true, the chart will treat the column as a text column.

Type: boolean

useFirstColumnAsDomain

If set to true, the chart will treat the column as the domain.

Type: boolean

vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis. These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex, then configure the axis using vAxes. The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    

Type: Array of object, or object with child objects

Default: null

vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

Type: object

Default: null

vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

vAxis.logScale

If true, makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean

Default: false

vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object

Default: null

vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number

Default: 1

vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number

Default: null

vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

vAxis.textStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.title

Specifies a title for the vertical axis.

Type: string

Default: no title

vAxis.titleTextStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object

Default: null

vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

Calendar configuration options Name height

Height of the chart in pixels.

Type: number

Default: height of the containing element

width

Width of the chart in pixels.

Type: number

Default: width of the containing element

Candlestick chart configuration options Name backgroundColor

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.

Type: string or object

Default: 'white'

backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string

Default: 'white'

chartArea

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%'}

Type: object

Default: null

chartArea.backgroundColor

Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided:

Type: string or object

Default: 'white'

chartArea.height

Chart area height.

Type: number or string

Default: auto

chartArea.left

How far to draw the chart from the left border.

Type: number or string

Default: auto

chartArea.top

How far to draw the chart from the top border.

Type: number or string

Default: auto

chartArea.width

Chart area width.

Type: number or string

Default: auto

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'].

Type: Array of strings

Default: default colors

hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

Type: object

Default: null

hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

hAxis.logScale

hAxis property that makes the horizontal axis a logarithmic scale (requires all values to be positive). Set to true for yes.

This option is only supported for a continuous axis.

Type: boolean

Default: false

hAxis.maxValue

Moves the max value of the horizontal axis to the specified value; this will be rightward in most charts. Ignored if this is set to a value smaller than the maximum x-value of the data. hAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval) and the minimum required space (see hAxis.minorGridlines.minSpacing).

Type: number

Default: 1

hAxis.minValue

Moves the min value of the horizontal axis to the specified value; this will be leftward in most charts. Ignored if this is set to a value greater than the minimum x-value of the data. hAxis.viewWindow.min overrides this property.

Type: number

Default: automatic

hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

hAxis.textStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string

Default: null

hAxis.titleTextStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object

Default: null

hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

legend

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}}

Type: object

Default: null

legend.position

Position of the legend. Can be one of the following:

Type: string

Default: 'right'

legendTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

reverseCategories

If set to true, draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean

Default: false

series

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used. Each object supports the following properties:

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}

Type: Array of objects, or object with nested objects

Default: {}

subtitle

Text to display below the chart title.

Type: string

Default: no title

subtitleTextStyle

An object that specifies the title text style.

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

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

theme

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

Type: string

Default: null

title

Text to display above the chart.

Type: string

Default: no title

titleTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

useFirstColumnAsDomain

If set to true, the chart will treat the column as the domain.

Type: boolean

vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis. These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex, then configure the axis using vAxes. The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    

Type: Array of object, or object with child objects

Default: null

vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

Type: object

Default: null

vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

vAxis.logScale

If true, makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean

Default: false

vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object

Default: null

vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number

Default: 1

vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number

Default: null

vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

vAxis.textStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.title

Specifies a title for the vertical axis.

Type: string

Default: no title

vAxis.titleTextStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object

Default: null

vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

Column chart configuration options Name backgroundColor

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.

Type: string or object

Default: 'white'

backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string

Default: 'white'

chartArea

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%'}

Type: object

Default: null

chartArea.backgroundColor

Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided:

Type: stringor object

Default: 'white'

chartArea.height

Chart area height.

Type: number or string

Default: auto

chartArea.left

How far to draw the chart from the left border.

Type: number or string

Default: auto

chartArea.top

How far to draw the chart from the top border.

Type: number or string

Default: auto

chartArea.width

Chart area width.

Type: number or string

Default: auto

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'].

Type: Array of strings

Default: default colors

hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

Type: object

Default: null

hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

hAxis.logScale

hAxis property that makes the horizontal axis a logarithmic scale (requires all values to be positive). Set to true for yes.

This option is only supported for a continuous axis.

Type: boolean

Default: false

hAxis.maxValue

Moves the max value of the horizontal axis to the specified value; this will be rightward in most charts. Ignored if this is set to a value smaller than the maximum x-value of the data. hAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval) and the minimum required space (see hAxis.minorGridlines.minSpacing).

Type: number

Default: 1

hAxis.minValue

Moves the min value of the horizontal axis to the specified value; this will be leftward in most charts. Ignored if this is set to a value greater than the minimum x-value of the data. hAxis.viewWindow.min overrides this property.

Type: number

Default: automatic

hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

hAxis.textStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string

Default: null

hAxis.titleTextStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object

Default: null

hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

isStacked

If set to true, stacks the elements for all series at each domain value. Note: In Column, Area, and SteppedArea charts, Google Charts reverses the order of legend items to better correspond with the stacking of the series elements (E.g. series 0 will be the bottom-most legend item). This does not apply to Bar Charts.

The isStacked option also supports 100% stacking, where the stacks of elements at each domain value are rescaled to add up to 100%.

The options for isStacked are:

For 100% stacking, the calculated value for each element will appear in the tooltip after its actual value.

The target axis will default to tick values based on the relative 0-1 scale as fractions of 1 for 'relative', and 0-100% for 'percent' (Note: when using the 'percent' option, the axis/tick values are displayed as percentages, however the actual values are the relative 0-1 scale values. This is because the percentage axis ticks are the result of applying a format of "#.##%" to the relative 0-1 scale values. When using isStacked: 'percent', be sure to specify any ticks/gridlines using the relative 0-1 scale values). You can customize the gridlines/tick values and formatting using the appropriate hAxis/vAxis options.

100% stacking only supports data values of type number, and must have a baseline of zero.

Type: boolean/string

Default: false

legend

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}}

Type: object

Default: null

legend.position

Position of the legend. Can be one of the following:

Type: string

Default: 'right'

legendTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

reverseCategories

If set to true, draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean

Default: false

series

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used. Each object supports the following properties:

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    

Type: Array of objects, or object with nested objects

Default: {}

subtitle

Text to display below the chart title.

Type: string

Default: no title

subtitleTextStyle

An object that specifies the title text style.

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

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

theme

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

Type: string

Default: null

title

Text to display above the chart.

Type: string

Default: no title

titleTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

trendlines

Displays trendlines on the charts that support them. By default, linear trendlines are used, but this can be customized with the trendlines.n.type option.

Trendlines are specified on a per-series basis, so most of the time your options will look like this:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      visibleInLegend: true
    }
  }
}
    

Type: object

Default: null

trendlines.n.color

The color of the trendline , expressed as either an English color name or a hex string.

Type: string

Default: default series color

trendlines.n.degree

For trendlines of type: 'polynomial', the degree of the polynomial (2 for quadratic, 3 for cubic, and so on).

Type: number

Default: 3

trendlines.n.labelInLegend

If set, the trendline will appear in the legend as this string.

Type: string

Default: null

trendlines.n.lineWidth

The line width of the trendline, in pixels.

Type: number

Default: 2

trendlines.n.type

Whether the trendlines is 'linear' (the default), 'exponential', or 'polynomial'.

Type: string

Default: linear

trendlines.n.visibleInLegend

Whether the trendline equation appears in the legend. It will appear in the trendline tooltip.

Type: boolean

Default: false

useFirstColumnAsDomain

If set to true, the chart will treat the column as the domain.

Type: boolean

vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis. These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex, then configure the axis using vAxes. The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    

Type: Array of object, or object with child objects

Default: null

vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

Type: object

Default: null

vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

vAxis.logScale

If true, makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean

Default: false

vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object

Default: null

vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number

Default: 1

vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number

Default: null

vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

vAxis.textStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.title

Specifies a title for the vertical axis.

Type: string

Default: no title

vAxis.titleTextStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object

Default: null

vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

Combo chart configuration options Name areaOpacity

The default opacity of the colored area under an area chart series, where 0.0 is fully transparent and 1.0 is fully opaque. To specify opacity for an individual series, set the areaOpacity value in the series property.

Type: number, 0.0- 1.0

Default: 0.3

backgroundColor

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.

Type: string or object

Default: 'white'

backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string

Default: 'white'

chartArea

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%'}

Type: object

Default: null

chartArea.backgroundColor

Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided:

Type: string or object

Default: 'white'

chartArea.height

Chart area height.

Type: number or string

Default: auto

chartArea.left

How far to draw the chart from the left border.

Type: number or string

Default: auto

chartArea.top

How far to draw the chart from the top border.

Type: number or string

Default: auto

chartArea.width

Chart area width.

Type: number or string

Default: auto

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'].

Type: Array of strings

Default: default colors

curveType

Controls the curve of the lines when the line width is not zero. Can be one of the following:

Type:string

Default: 'none'

hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

Type: object

Default: null

hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

hAxis.logScale

hAxis property that makes the horizontal axis a logarithmic scale (requires all values to be positive). Set to true for yes.

This option is only supported for a continuous axis.

Type: boolean

Default: false

hAxis.maxValue

Moves the max value of the horizontal axis to the specified value; this will be rightward in most charts. Ignored if this is set to a value smaller than the maximum x-value of the data. hAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval) and the minimum required space (see hAxis.minorGridlines.minSpacing).

Type: number

Default: 1

hAxis.minValue

Moves the min value of the horizontal axis to the specified value; this will be leftward in most charts. Ignored if this is set to a value greater than the minimum x-value of the data. hAxis.viewWindow.min overrides this property.

Type: number

Default: automatic

hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

hAxis.textStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string

Default: null

hAxis.titleTextStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object

Default: null

hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

interpolateNulls

Whether to guess the value of missing points. If true, it will guess the value of any missing data based on neighboring points. If false, it will leave a break in the line at the unknown point.

This is not supported by Area charts with the isStacked: true/'percent'/'relative'/'absolute' option.

Type: boolean

Default: false

isStacked

If set to true, stacks the elements for all series at each domain value. Note: In Column, Area, and SteppedArea charts, Google Charts reverses the order of legend items to better correspond with the stacking of the series elements (E.g. series 0 will be the bottom-most legend item). This does not apply to Bar Charts.

The isStacked option also supports 100% stacking, where the stacks of elements at each domain value are rescaled to add up to 100%.

The options for isStacked are:

For 100% stacking, the calculated value for each element will appear in the tooltip after its actual value.

The target axis will default to tick values based on the relative 0-1 scale as fractions of 1 for 'relative', and 0-100% for 'percent' (Note: when using the 'percent' option, the axis/tick values are displayed as percentages, however the actual values are the relative 0-1 scale values. This is because the percentage axis ticks are the result of applying a format of "#.##%" to the relative 0-1 scale values. When using isStacked: 'percent', be sure to specify any ticks/gridlines using the relative 0-1 scale values). You can customize the gridlines/tick values and formatting using the appropriate hAxis/vAxis options.

100% stacking only supports data values of type number, and must have a baseline of zero.

Type: boolean/string

Default: false

legend

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}}

Type: object

Default: null

legend.position

Position of the legend. Can be one of the following:

Type: string

Default: 'right'

legendTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

lineWidth

Data line width in pixels. Use zero to hide all lines and show only the points. You can override values for individual series using the series property.

Type: number

Default: 2

pointShape

The shape of individual data elements: 'circle', 'triangle', 'square', 'diamond', 'star' or 'polygon'. See the points documentation for examples.

Type: string

Default: 'circle'

pointSize

Diameter of displayed points in pixels. Use zero to hide all points. You can override values for individual series using the series property. If you're using a trendline, the pointSize option will affect the width of the trendline unless you override it with the trendlines.n.pointsize option.

Type: number

Default: 0

reverseCategories

If set to true, draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean

Default: false

series

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used. Each object supports the following properties:

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    

Type: Array of objects, or object with nested objects

Default: {}

subtitle

Text to display below the chart title.

Type: string

Default: no title

subtitleTextStyle

An object that specifies the title text style.

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

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

theme

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

Type: string

Default: null

title

Text to display above the chart.

Type: string

Default: no title

titleTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

useFirstColumnAsDomain

If set to true, the chart will treat the column as the domain.

Type: boolean

vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis. These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex, then configure the axis using vAxes. The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    

Type: Array of object, or object with child objects

Default: null

vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

Type: object

Default: null

vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

vAxis.logScale

If true, makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean

Default: false

vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object

Default: null

vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number

Default: 1

vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number

Default: null

vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

vAxis.textStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.title

Specifies a title for the vertical axis.

Type: string

Default: no title

vAxis.titleTextStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object

Default: null

vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

Gauge configuration options Name greenColor

The color to use for the green section in HTML color notation.

Type: string

Default: '#109618'

greenFrom

The lowest value for a range marked by a green color.

Type: number

Default: none

greenTo

The highest value for a range marked by a green color.

Type: number

Default: none

height

Height of the chart in pixels.

Type: number

Default: Container's width

max

The maximum value to show on the Y axis. If the maximum data point exceeds this value, this setting is ignored, and the chart is adjusted to show the next major tick mark above the maximum data point. This takes precedence over the Y axis maximum determined by scaleType.

This is similar to maxValue in core charts.

Type: number

Default: automatic

min

The minimum value to show on the Y axis. If the minimum data point is less than this value, this setting is ignored, and the chart is adjusted to show the next major tick mark below the minimum data point. This takes precedence over the Y axis minimum determined by scaleType.

This is similar to minValue in core charts.

Type: number

Default: automatic

redColor

The color to use for the red section in HTML color notation.

Type: string

Default: '#DC3912'

redFrom

The lowest value for a range marked by a red color.

Type: number

Default: none

redTo

The highest value for a range marked by a red color.

Type: number

Default: none

width

Width of the chart in pixels.

Type: number

Default: Container's width

yellowColor

The color to use for the yellow section in HTML color notation.

Type: string

Default: '#FF9900'

yellowFrom

The lowest value for a range marked by a yellow color.

Type: number

Default: none

yellowTo

The highest value for a range marked by a yellow color.

Type: number

Default: none

Geochart configuration options Name backgroundColor

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.

Type: string or object

Default: 'white'

backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string

Default: 'white'

datalessRegionColor

Color to assign to regions with no associated data.

Type: string

Default: '#F5F5F5'

defaultColor

The color to use for data points in a geochart when the location (e.g., 'US' ) is present but the value is either null or unspecified. This is distinct from datalessRegionColor, which is the color used when data is missing.

Type: string

Default: '#267114'

displayMode

Which type of geochart this is. The DataTable format must match the value specified. The following values are supported:

Type: string

Default: 'auto'

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

legend

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}}

Type: object

Default: null

legendTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

region

The area to display on the geochart. Surrounding areas are displayed as well. Can be one of the following:

Type: string

Default: 'world'

width

Width of the chart in pixels.

Type: number

Default: width of the containing element

Histogram configuration options Name backgroundColor

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.

Type: string or object

Default: 'white'

backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string

Default: 'white'

chartArea

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%'}

Type: object

Default: null

chartArea.backgroundColor

Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided:

Type: string

or

object

/div>

Default: 'white'

chartArea.height

Chart area height.

Type: number or string

Default: auto

chartArea.left

How far to draw the chart from the left border.

Type: number or string

Default: auto

chartArea.top

How far to draw the chart from the top border.

Type: number or string

Default: auto

chartArea.width

Chart area width.

Type: number or string

Default: auto

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'].

Type: Array of strings

Default: default colors

hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

Type: object

Default: null

hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval) and the minimum required space (see hAxis.minorGridlines.minSpacing).

Type: number

Default: 1

hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

hAxis.textStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string

Default: null

hAxis.titleTextStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object

Default: null

hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

histogram.bucketSize

Hardcode the size of each histogram bar, rather than letting it be determined algorithmically.

Type: number

Default: auto

histogram.hideBucketItems

Omit the thin divisions between the blocks of the histogram, making it into a series of solid bars.

Type: boolean

Default: false

histogram.lastBucketPercentile

When calculating the histogram's bucket size, ignore the top and bottom lastBucketPercentile percent. The values are still included in the histogram, but do not affect bucketing.

Type: number

Default: 0

interpolateNulls

Whether to guess the value of missing points. If true, it will guess the value of any missing data based on neighboring points. If false, it will leave a break in the line at the unknown point.

This is not supported by Area charts with the isStacked: true/'percent'/'relative'/'absolute' option.

Type: boolean

Default: false

isStacked

If set to true, stacks the elements for all series at each domain value. Note: In Column, Area, and SteppedArea charts, Google Charts reverses the order of legend items to better correspond with the stacking of the series elements (E.g. series 0 will be the bottom-most legend item). This does not apply to Bar Charts.

The isStacked option also supports 100% stacking, where the stacks of elements at each domain value are rescaled to add up to 100%.

The options for isStacked are:

For 100% stacking, the calculated value for each element will appear in the tooltip after its actual value.

The target axis will default to tick values based on the relative 0-1 scale as fractions of 1 for 'relative', and 0-100% for 'percent' (Note: when using the 'percent' option, the axis/tick values are displayed as percentages, however the actual values are the relative 0-1 scale values. This is because the percentage axis ticks are the result of applying a format of "#.##%" to the relative 0-1 scale values. When using isStacked: 'percent', be sure to specify any ticks/gridlines using the relative 0-1 scale values). You can customize the gridlines/tick values and formatting using the appropriate hAxis/vAxis options.

100% stacking only supports data values of type number, and must have a baseline of zero.

Type: boolean/string

Default: false

legend

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}}

Type: object

Default: null

legend.position

Position of the legend. Can be one of the following:

Type: string

Default: 'right'

legendTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

reverseCategories

If set to true, draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean

Default: false

series

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used. Each object supports the following properties:

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    

Type: Array of objects, or object with nested objects

Default: {}

subtitle

Text to display below the chart title.

Type: string

Default: no title

subtitleTextStyle

An object that specifies the title text style.

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

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

theme

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

Type: string

Default: null

title

Text to display above the chart.

Type: string

Default: no title

titleTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

useFirstColumnAsDomain

If set to true, the chart will treat the column as the domain.

Type: boolean

vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis. These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex, then configure the axis using vAxes. The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    

Type: Array of object, or object with child objects

Default: null

vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

Type: object

Default: null

vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

vAxis.logScale

If true, makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean

Default: false

vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object

Default: null

vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number

Default: 1

vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number

Default: null

vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

vAxis.textStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.title

Specifies a title for the vertical axis.

Type: string

Default: no title

vAxis.titleTextStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object

Default: null

vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

width

Width of the chart in pixels.

Type: number

Default: width of the containing element

Line chart configuration options Name backgroundColor

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.

Type: string or object

Default: 'white'

backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string

Default: 'white'

chartArea

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%'}

Type: object

Default: null

chartArea.backgroundColor

Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided:

Type: string or object

Default: 'white'

chartArea.height

Chart area height.

Type: number or string

Default: auto

chartArea.left

How far to draw the chart from the left border.

Type: number or string

Default: auto

chartArea.top

How far to draw the chart from the top border.

Type: number or string

Default: auto

chartArea.width

Chart area width.

Type: number or string

Default: auto

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'].

Type: Array of strings

Default: default colors

curveType

Controls the curve of the lines when the line width is not zero. Can be one of the following:

Type: string

Default: 'none'

hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

Type: object

Default: null

hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

hAxis.logScale

hAxis property that makes the horizontal axis a logarithmic scale (requires all values to be positive). Set to true for yes.

This option is only supported for a continuous axis.

Type: boolean

Default: false

hAxis.maxValue

Moves the max value of the horizontal axis to the specified value; this will be rightward in most charts. Ignored if this is set to a value smaller than the maximum x-value of the data. hAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type:string

Default: A blend of the gridline and background colors

hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval) and the minimum required space (see hAxis.minorGridlines.minSpacing).

Type: number

Default: 1

hAxis.minValue

Moves the min value of the horizontal axis to the specified value; this will be leftward in most charts. Ignored if this is set to a value greater than the minimum x-value of the data. hAxis.viewWindow.min overrides this property.

Type: number

Default: automatic

hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

hAxis.textStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string

Default: null

hAxis.titleTextStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object

Default: null

hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

interpolateNulls

Whether to guess the value of missing points. If true, it will guess the value of any missing data based on neighboring points. If false, it will leave a break in the line at the unknown point.

This is not supported by Area charts with the isStacked: true/'percent'/'relative'/'absolute' option.

Type: boolean

Default: false

legend

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}}

Type: object

Default: null

legend.position

Position of the legend. Can be one of the following:

Type: string

Default: 'right'

legendTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

lineWidth

Data line width in pixels. Use zero to hide all lines and show only the points. You can override values for individual series using the series property.

Type: number

Default: 2

pointShape

The shape of individual data elements: 'circle', 'triangle', 'square', 'diamond', 'star' or 'polygon'. See the points documentation for examples.

Type: string

Default: 'circle'

pointSize

Diameter of displayed points in pixels. Use zero to hide all points. You can override values for individual series using the series property. If you're using a trendline, the pointSize option will affect the width of the trendline unless you override it with the trendlines.n.pointsize option.

Type: number

Default: 0

reverseCategories

If set to true, draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean

Default: false

series

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used. Each object supports the following properties:

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    

Type: Array of objects, or object with nested objects

Default: {}

subtitle

Text to display below the chart title.

Type: string

Default: no title

subtitleTextStyle

An object that specifies the title text style.

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

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

theme

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

Type: string

Default: null

title

Text to display above the chart.

Type: string

Default: no title

titleTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

treatLabelsAsText

If set to true, the chart will treat the column as a text column.

Type: boolean

trendlines

Displays trendlines on the charts that support them. By default, linear trendlines are used, but this can be customized with the trendlines.n.type option.

Trendlines are specified on a per-series basis, so most of the time your options will look like this:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      visibleInLegend: true
    }
  }
}
    

Type: object

Default: null

trendlines.n.color

The color of the trendline , expressed as either an English color name or a hex string.

Type: string

Default: default series color

trendlines.n.degree

For trendlines of type: 'polynomial', the degree of the polynomial (2 for quadratic, 3 for cubic, and so on).

Type: number

Default: 3

trendlines.n.labelInLegend

If set, the trendline will appear in the legend as this string.

Type: string

Default: null

trendlines.n.lineWidth

The line width of the trendline , in pixels.

Type: number

Default: 2

trendlines.n.type

Whether the trendlines is 'linear' (the default), 'exponential', or 'polynomial'.

Type: string

Default: linear

trendlines.n.visibleInLegend

Whether the trendline equation appears in the legend. It will appear in the trendline tooltip.

Type: boolean

Default: false

useFirstColumnAsDomain

If set to true, the chart will treat the column as the domain.

Type: boolean

vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis. These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex, then configure the axis using vAxes. The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    

Type: Array of object, or object with child objects

Default: null

vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

Type: object

Default: null

vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

vAxis.logScale

If true, makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean

Default: false

vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object

Default: null

vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number

Default: 1

vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number

Default: null

vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

vAxis.textStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.title

Specifies a title for the vertical axis.

Type: string

Default: no title

vAxis.titleTextStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object

Default: null

vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

Org chart configuration options Name color

The background color of the org chart elements.

Type: string

Default: '#edf7ff'

selectionColor

The background color of selected org chart elements.

Type: string

Default: '#d6e9f8'

size

The overall size of the chart. Options include 'small', 'medium', or 'large'.

Type: string

Default: 'medium'

Pie chart configuration options Name backgroundColor

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.

Type: string or object

Default: 'white'

backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string

Default: 'white'

chartArea

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%'}

Type: object

Default: null

chartArea.backgroundColor

Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided:

Type: string or object

Default: 'white'

chartArea.height

Chart area height.

Type: number or string

Default: auto

chartArea.left

How far to draw the chart from the left border.

Type: number or string

Default: auto

chartArea.top

How far to draw the chart from the top border.

Type: number or string

Default: auto

chartArea.width

Chart area width.

Type: number or string

Default: auto

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'].

Type: Array of strings

Default: default colors

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

is3D

If true, displays a three-dimensional chart.

Type: boolean

Default: false

legend

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}}

Type: object

Default: null

legend.position

Position of the legend. Can be one of the following:

Type: string

Default: 'right'

legendTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

pieHole

If between 0 and 1, displays a donut chart. The hole has a radius equal to number times the radius of the chart.

Type: number

Default: 0

pieSliceBorderColor

The color of the slice borders. Only applicable when the chart is two-dimensional.

Type: string

Default: 'white'

pieSliceText

The content of the text displayed on the slice. Can be one of the following:

Type: string

Default: 'percentage'

pieSliceTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

reverseCategories

If set to true, draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean

Default: false

slices.color

The color to use for this slice.

Type: string

subtitle

Text to display below the chart title.

Type: string

Default: no title

subtitleTextStyle

An object that specifies the title text style.

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

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

title

Text to display above the chart.

Type: string

Default: no title

titleTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

Scatter chart configuration options Name backgroundColor

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.

Type: string or object

Default: 'white'

backgroundColor.fill

The chart fill color, as an HTML color string.

Type:string

Default: 'white'

chartArea

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%'}

Type: object

Default: null

chartArea.backgroundColor

Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided:

Type: string or object

Default: 'white'

chartArea.height

Chart area height.

Type: number or string

Default: auto

chartArea.left

How far to draw the chart from the left border.

Type: number or string

Default: auto

chartArea.top

How far to draw the chart from the top border.

Type: number or string

Default: auto

chartArea.width

Chart area width.

Type: number or string

Default: auto

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'].

Type: Array of strings

Default: default colors

curveType

Controls the curve of the lines when the line width is not zero. Can be one of the following:

Type:string

Default: 'none'

hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

Type: object

Default: null

hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

hAxis.gridlines

An object with properties to configure the gridlines on the horizontal axis. Note that horizontal axis gridlines are drawn vertically. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.gridlines.color

The color of the horizontal gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

hAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

hAxis.logScale

hAxis property that makes the horizontal axis a logarithmic scale (requires all values to be positive). Set to true for yes.

This option is only supported for a continuous axis.

Type: boolean

Default: false

hAxis.maxValue

Moves the max value of the horizontal axis to the specified value; this will be rightward in most charts. Ignored if this is set to a value smaller than the maximum x-value of the data. hAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

hAxis.minorGridlines

An object with members to configure the minor gridlines on the horizontal axis, similar to the hAxis.gridlines option.

This option is only supported for a continuous axis.

Type: object

Default: null

hAxis.minorGridlines.color

The color of the horizontal minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

hAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines now depends entirely on the interval between major gridlines (see hAxis.gridlines.interval) and the minimum required space (see hAxis.minorGridlines.minSpacing).

Type: number

Default: 1

hAxis.minValue

Moves the min value of the horizontal axis to the specified value; this will be leftward in most charts. Ignored if this is set to a value greater than the minimum x-value of the data. hAxis.viewWindow.min overrides this property.

Type: number

Default: automatic

hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

hAxis.textStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string

Default: null

hAxis.titleTextStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object

Default: null

hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

legend

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}}

Type: object

Default: null

legend.position

Position of the legend. Can be one of the following:

Type: string

Default: 'right'

legendTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

lineWidth

Data line width in pixels. Use zero to hide all lines and show only the points. You can override values for individual series using the series property.

Type: number

Default: 2

pointShape

The shape of individual data elements: 'circle', 'triangle', 'square', 'diamond', 'star' or 'polygon'. See the points documentation for examples.

Type: string

Default: 'circle'

pointSize

Diameter of displayed points in pixels. Use zero to hide all points. You can override values for individual series using the series property. If you're using a trendline, the pointSize option will affect the width of the trendline unless you override it with the trendlines.n.pointsize option.

Type: number

Default: 0

series

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used. Each object supports the following properties:

You can specify either an array of objects, each of which applies to the series in the order given,or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    

Type: Array of objects, or object with nested objects

Default: {}

subtitle

Text to display below the chart title.

Type: string

Default: no title

subtitleTextStyle

An object that specifies the title text style.

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

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

theme

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

Type: string

Default: null

title

Text to display above the chart.

Type: string

Default: no title

titleTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

treatLabelsAsText

If set to true, the chart will treat the column as a text column.

Type: boolean

trendlines

Displays trendlines on the charts that support them. By default, linear trendlines are used, but this can be customized with the trendlines.n.type option.

Trendlines are specified on a per-series basis, so most of the time your options will look like this:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      visibleInLegend: true
    }
  }
}
    

Type: object

Default: null

trendlines.n.color

The color of the trendline , expressed as either an English color name or a hex string.

Type: string

Default: default series color

trendlines.n.degree

For trendlines of type: 'polynomial', the degree of the polynomial (2 for quadratic, 3 for cubic, and so on).

Type: number

Default: 3

trendlines.n.labelInLegend

If set, the trendline will appear in the legend as this string.

Type: string

Default: null

trendlines.n.lineWidth

The line width of the trendline , in pixels.

Type: number

Default: 2

trendlines.n.type

Whether the trendlines is 'linear' (the default), 'exponential', or 'polynomial'.

Type: string

Default: linear

trendlines.n.visibleInLegend

Whether the trendline equation appears in the legend. It will appear in the trendline tooltip.

Type: boolean

Default: false

useFirstColumnAsDomain

If set to true, the chart will treat the column as the domain.

Type: boolean

vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis. These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex, then configure the axis using vAxes. The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    

Type: Array of object, or object with child objects

Default: null

vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

Type: object

Default: null

vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

vAxis.logScale

If true, makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean

Default: false

vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object

Default: null

vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number

Default: 1

vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number

Default: null

vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

vAxis.textStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.title

Specifies a title for the vertical axis.

Type: string

Default: no title

vAxis.titleTextStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object

Default: null

vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

Stepped area chart configuration options Name areaOpacity

The default opacity of the colored area under an area chart series, where 0.0 is fully transparent and 1.0 is fully opaque. To specify opacity for an individual series, set the areaOpacity value in the series property.

Type: number, 0.0- 1.0

Default: 0.3

backgroundColor

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.

Type: string or object

Default: 'white'

backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string

Default: 'white'

chartArea

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%'}

Type: object

Default: null

chartArea.backgroundColor

Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided:

Type: string or object

Default: 'white'

chartArea.height

Chart area height.

Type: number or string

Default: auto

chartArea.left

How far to draw the chart from the left border.

Type: number or string

Default: auto

chartArea.top

How far to draw the chart from the top border.

Type: number or string

Default: auto

chartArea.width

Chart area width.

Type: number or string

Default: auto

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'].

Type: Array of strings

Default: default colors

hAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

Type: object

Default: null

hAxis.direction

The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

hAxis.textPosition

Position of the horizontal axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

hAxis.textStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.title

hAxis property that specifies the title of the horizontal axis.

Type: string

Default: null

hAxis.titleTextStyle

An object that specifies the horizontal axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object

Default: null

hAxis.viewWindow.max

The maximum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

hAxis.viewWindow.min

The minimum horizontal data value to render.

Ignored when hAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

isStacked

If set to true, stacks the elements for all series at each domain value. Note: In Column, Area, and SteppedArea charts, Google Charts reverses the order of legend items to better correspond with the stacking of the series elements (E.g. series 0 will be the bottom-most legend item). This does not apply to Bar Charts.

The isStacked option also supports 100% stacking, where the stacks of elements at each domain value are rescaled to add up to 100%.

The options for isStacked are:

For 100% stacking, the calculated value for each element will appear in the tooltip after its actual value.

The target axis will default to tick values based on the relative 0-1 scale as fractions of 1 for 'relative', and 0-100% for 'percent' (Note: when using the 'percent' option, the axis/tick values are displayed as percentages, however the actual values are the relative 0-1 scale values. This is because the percentage axis ticks are the result of applying a format of "#.##%" to the relative 0-1 scale values. When using isStacked: 'percent', be sure to specify any ticks/gridlines using the relative 0-1 scale values). You can customize the gridlines/tick values and formatting using the appropriate hAxis/vAxis options.

100% stacking only supports data values of type number, and must have a baseline of zero.

Type: boolean/ string

Default: false

legend

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}}

Type: object

Default: null

legend.position

Position of the legend. Can be one of the following:

Type: string

Default: 'right'

legendTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

reverseCategories

If set to true, draws series from right to left. The default is to draw left to right.

This option is only supported for a discrete major axis.

Type: boolean

Default: false

series

An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used. Each object supports the following properties:

You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to.For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    

Type: Array of objects, or object with nested objects

Default: {}

subtitle

Text to display below the chart title.

Type: string

Default: no title

subtitleTextStyle

An object that specifies the title text style.

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

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

theme

A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:

Type: string

Default: null

title

Text to display above the chart.

Type: string

Default: no title

titleTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

treatLabelsAsText

If set to true, the chart will treat the column as a text column.

Type: boolean

useFirstColumnAsDomain

If set to true, the chart will treat the column as the domain.

Type: boolean

vAxes

Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a vAxis object, and can contain all the properties supported by vAxis. These property values override any global settings for the same property.

To specify a chart with multiple vertical axes, first define a new axis using series.targetAxisIndex, then configure the axis using vAxes. The following example assigns series 2 to the right axis and specifies a custom title and text style for it:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxis object shown above:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    

Type: Array of object, or object with child objects

Default: null

vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

Type: object

Default: null

vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1

Default: 1

vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}

This option is only supported for a continuous axis.

Type: object

Default: null

vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: '#CCC'

vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count, it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number

Default: -1

vAxis.logScale

If true, makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean

Default: false

vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number

Default: automatic

vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object

Default: null

vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string

Default: A blend of the gridline and background colors

vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines and the minimum required space.

Type: number

Default: 1

vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number

Default: null

vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string

Default: 'out'

vAxis.textStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.title

Specifies a title for the vertical axis.

Type: string

Default: no title

vAxis.titleTextStyle

An object that specifies the vertical axis 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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object

Default: null

vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number

Default: auto

width

Width of the chart in pixels.

Type: number

Default: width of the containing element

Table chart configuration options Name alternatingRowStyle

Determines if an alternating color style will be assigned to odd and even rows.

Type: boolean

Default: true

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

page

If and how to enable paging through the data. Choose one of the following string values:

pageSize

The number of rows in each page, when paging is enabled with the page option.

Type: number

Default: 10

showRowNumber

If set to true, shows the row number as the first column of the table.

Type: boolean

Default: false

sort

If and how to sort columns when the user clicks a column heading. If sorting is enabled, consider setting the sortAscending and sortColumn properties as well. Choose one of the following string values:

Type: string

Default: 'enable'

sortAscending

The order in which the initial sort column is sorted. True for ascending, false for descending. Ignored if sortColumn is not specified.

Type: boolean

Default: true

sortColumn

An index of a column in the data table, by which the table is initially sorted. The column is marked with a small arrow indicating the sort order.

Type: number

Default: -1

width

Width of the chart in pixels.

Type: number

Default: width of the containing element

Timeline configuration options Name backgroundColor

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.

Type: string or object

Default: 'white'

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'].

Type: Array of strings

Default: default colors

height

Height of the chart in pixels.

Type: number

Default: height of the containing element

width

Width of the chart in pixels.

Type: number

Default: width of the containing element

Tree map configuration options Name headerColor

The color of the header section for each node. Specify an HTML color value.

Type: string

Default: #988f86

maxColor

The color for a rectangle with a column 3 value of maxColorValue. Specify an HTML color value.

Type: string

Default: #00dd00

maxDepth

The maximum number of node levels to show in the current view. Levels are flattened into the current plane. If your tree has more levels than this, you must go up or down to see them. You can additionally see maxPostDepth levels below this as shaded rectangles within these nodes.

Type: number

Default: 1

maxPostDepth

How many levels of nodes beyond maxDepth to show in "hinted" fashion. Hinted nodes are shown as shaded rectangles within a node that is within the maxDepth limit.

Type: number

Default: 0

midColor

The color for a rectangle with a column 3 value midway between maxColorValue and minColorValue. Specify an HTML color value.

Type: string

Default: #000000

minColor

The color for a rectangle with the column 3 value of minColorValue. Specify an HTML color value.

Type: string

Default: #dd0000

noColor

The color to use for a rectangle when a node has no value for column 3, and that node is a leaf (or contains only leaves). Specify an HTML color value.

Type: string

Default: #000000

subtitle

Text to display below the chart title.

Type: string

Default: no title

subtitleTextStyle

An object that specifies the title text style.

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

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

textStyle

An object that specifies the title text style. The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

title

Text to display above the chart.

Type: string

Default: no title

titleTextStyle

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.

Type: object

Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-08-04 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-04 UTC."],[[["The content provides detailed information on configuring various Google Chart types, including bar, column, line, pie, and more."],["Users can customize chart elements like axes, legends, titles, colors, and data series using the provided options."],["Each configuration option is described with its type, default value, and purpose for clear understanding."],["Customization allows tailoring charts for specific needs by adjusting appearance, behavior, and data display."],["Options for general chart settings, as well as specific chart types like gauge, geocharts, and histograms, are covered."]]],[]]


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4