Chart configuration options

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.

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.

The chart fill color, as an HTML color string.

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

• stroke : The color, provided as a hex string or English color name.
• strokeWidth : If provided, draws a border around the chart area of the given width (and with the color of stroke ).

Chart area height.

How far to draw the chart from the left border.

How far to draw the chart from the top border.

Chart area width.

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

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

• 'none' - Straight lines without curve.
• 'function' - The angles of the line will be smoothed.

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

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

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.

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

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.

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.

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.

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.

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

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 ).

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.

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

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 .

hAxis property that specifies the title of the horizontal axis.

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 .

Specifies the cropping range of the horizontal axis.

The maximum horizontal data value to render.

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

The minimum horizontal data value to render.

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

Height of the chart in pixels.

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 notsupported by Area charts with the isStacked: true/'percent'/'relative'/'absolute' option.

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 notapply 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:

• false — elements will not stack. This is the default option.
• true — stacks elements for all series at each domain value.
• 'percent' — stacks elements for all series at each domain value and rescales them such that they add up to 100%, with each element's value calculated as a percentage of 100%.
• 'relative' — stacks elements for all series at each domain value and rescales them such that they add up to 1, with each element's value calculated as a fraction of 1.
• 'absolute' — functions the same as isStacked: true .

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.

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

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

• 'bottom' - Below the chart.
• 'left' - To the left of the chart, provided the left axis has no series associated with it. So if you want the legend on the left, use the option targetAxisIndex: 1 .
• 'in' - Inside the chart, by the top left corner.
• 'none' - No legend is displayed.
• 'right' - To the right of the chart. Incompatible with the vAxes option.
• 'top' - Above the chart.

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 .

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.

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

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.

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.

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:

• annotations - An object to be applied to annotations for this series. This can be used to control, for instance, the textStyle for the series:

  series: {
    0: {
      annotations: {
        textStyle: {fontSize: 12, color: 'red' }
      }
    }
  }

  See the various annotations options for a more complete list of what can be customized.

• areaOpacity - Overrides the global areaOpacity for this series..
• color - The color to use for this series. Specify a valid HTML color string.
• curveType - Overrides the global curveType value for this series.
• fallingColor.fill - Overrides the global candlestick.fallingColor.fill value for this series.
• fallingColor.stroke - Overrides the global candlestick.fallingColor.stroke value for this series.
• fallingColor.strokeWidth - Overrides the global candlestick.fallingColor.strokeWidth value for this series.
• labelInLegend - The description of the series to appear in the chart legend.
• lineDashStyle - Overrides the global lineDashStyle value for this series.
• lineWidth - Overrides the global lineWidth value for this series.
• pointShape - Overrides the global pointShape value for this series.
• pointSize - Overrides the global pointSize value for this series.
• pointsVisible - Overrides the global pointsVisible value for this series.
• risingColor.fill - Overrides the global candlestick.risingColor.fill value for this series.
• risingColor.stroke - Overrides the global candlestick.risingColor.stroke value for this series.
• risingColor.strokeWidth - Overrides the global candlestick.risingColor.strokeWidth value for this series.
• targetAxisIndex - Which axis to assign this series to, where 0 is the default axis, and 1 is the opposite axis. Default value is 0 ; set to 1 to define a chart where different series are rendered against different axes. At least one series must be allocated to the default axis. You can define a different scale for different axes.
• type - The type of marker for this series. Valid values are 'line', 'area', 'bars', and 'steppedArea'. Note that bars are actually vertical bars (columns). The default value is specified by the chart's seriesType option.
• visibleInLegend - A boolean value, where true means that the series should have a legend entry, and false means that it should not. Default is true .

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

Text to display below the chart title.

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 .

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:

• 'maximized' - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area.

Text to display above the chart.

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 .

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

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

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

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.

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.

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

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.

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

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.

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

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

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.

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.

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

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 .

Specifies a title for the vertical axis.

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 .

Specifies the cropping range of the vertical axis.

The maximum vertical data value to render.

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

The minimum vertical data value to render.

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