## Chart Types - [Annotation chart](https://developers.google.com/apps-script/chart-configuration-options#annotation-config-options) - [Area chart](https://developers.google.com/apps-script/chart-configuration-options#area-config-options) - [Bar chart](https://developers.google.com/apps-script/chart-configuration-options#bar-config-options) - [Bubble chart](https://developers.google.com/apps-script/chart-configuration-options#bubblechart-config-options) - [Calendar](https://developers.google.com/apps-script/chart-configuration-options#calendar-config-options) - [Candlestick chart](https://developers.google.com/apps-script/chart-configuration-options#candlestick-config-options) - [Column chart](https://developers.google.com/apps-script/chart-configuration-options#column-config-options) - [Combo chart](https://developers.google.com/apps-script/chart-configuration-options#combo-config-options) - [Gauge](https://developers.google.com/apps-script/chart-configuration-options#gauge-config-options) - [Geochart](https://developers.google.com/apps-script/chart-configuration-options#geo-config-options) - [Histogram](https://developers.google.com/apps-script/chart-configuration-options#histogram-config-options) - [Line chart](https://developers.google.com/apps-script/chart-configuration-options#line-config-options) - [Org chart](https://developers.google.com/apps-script/chart-configuration-options#org-config-options) - [Pie chart](https://developers.google.com/apps-script/chart-configuration-options#pie-config-options) - [Scatter chart](https://developers.google.com/apps-script/chart-configuration-options#scatter-config-options) - [Stepped area chart](https://developers.google.com/apps-script/chart-configuration-options#steppedarea-config-options) - [Table chart](https://developers.google.com/apps-script/chart-configuration-options#tablechart-config-options) - [Timeline](https://developers.google.com/apps-script/chart-configuration-options#timeline-config-options) - [Tree map](https://developers.google.com/apps-script/chart-configuration-options#treemap-config-options) ## 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: - `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`). **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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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](https://developers.google.com/chart/interactive/docs/gallery/areachart) 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](https://developers.google.com/chart/interactive/docs/gallery/columnchart), [Area](https://developers.google.com/chart/interactive/docs/gallery/areachart), and [SteppedArea](https://developers.google.com/chart/interactive/docs/gallery/steppedareachart) 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](https://developers.google.com/chart/interactive/docs/gallery/barchart) 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. **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: - `'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. **Type:** `string` **Default:** `'right'` | | legendTextStyle | An object that specifies the legend text style. The object has this format: ``` { color: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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](https://developers.google.com/chart/interactive/docs/points) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) [`major`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: - `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. - `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. - `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. - `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} } ``` **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: , fontSize: } ` | | 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: - `'maximized'` - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. **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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `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`). **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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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](https://developers.google.com/chart/interactive/docs/gallery/columnchart), [Area](https://developers.google.com/chart/interactive/docs/gallery/areachart), and [SteppedArea](https://developers.google.com/chart/interactive/docs/gallery/steppedareachart) 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](https://developers.google.com/chart/interactive/docs/gallery/barchart) 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. **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: - `'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. **Type:** `string` **Default:** `'right'` | | legendTextStyle | An object that specifies the legend text style. The object has this format: ``` { color: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) [`major`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: - `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. - `color` - The color to use for this series. Specify a valid HTML color string. - `labelInLegend` - The description of the series to appear in the chart legend. - `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. - `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} } ``` **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: , fontSize: } ` | | 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: - `'maximized'` - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. **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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | trendlines | Displays [trendlines](https://developers.google.com/chart/interactive/docs/gallery/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](https://developers.google.com/chart/interactive/docs/gallery/trendlines), expressed as either an English color name or a hex string. **Type:** `string` **Default:** default series color | | trendlines.n.degree | For [trendlines](https://developers.google.com/chart/interactive/docs/gallery/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](https://developers.google.com/chart/interactive/docs/gallery/trendlines) will appear in the legend as this string. **Type:** `string` **Default:** `null` | | trendlines.n.lineWidth | The line width of the [trendline](https://developers.google.com/chart/interactive/docs/gallery/trendlines), in pixels. **Type:** `number` **Default:** `2` | | trendlines.n.type | Whether the [trendlines](https://developers.google.com/chart/interactive/docs/gallery/trendlines) is `'linear'` (the default), `'exponential'`, or `'polynomial'`. **Type:** `string` **Default:** `linear` | | trendlines.n.visibleInLegend | Whether the [trendline](https://developers.google.com/chart/interactive/docs/gallery/trendlines) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `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`). **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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `'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. **Type:** `string` **Default:** `'right'` | | legendTextStyle | An object that specifies the legend text style. The object has this format: ``` { color: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `color` - The color to use for this series. Specify a valid HTML color string. - `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`. 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: , fontSize: } ` | | 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: - `'maximized'` - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. **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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `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`). **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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `'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. **Type:** `string` **Default:** `'right'` | | legendTextStyle | An object that specifies the legend text style. The object has this format: ``` { color: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) [`major`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: - `color` - The color to use for this series. Specify a valid HTML color string. - `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. - `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. - `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} } ``` **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: , fontSize: } ` | | 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: - `'maximized'` - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. **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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `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`). **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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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](https://developers.google.com/chart/interactive/docs/gallery/columnchart), [Area](https://developers.google.com/chart/interactive/docs/gallery/areachart), and [SteppedArea](https://developers.google.com/chart/interactive/docs/gallery/steppedareachart) 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](https://developers.google.com/chart/interactive/docs/gallery/barchart) 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. **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: - `'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. **Type:** `string` **Default:** `'right'` | | legendTextStyle | An object that specifies the legend text style. The object has this format: ``` { color: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) [`major`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: - `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. - `color` - The color to use for this series. Specify a valid HTML color string. - `labelInLegend` - The description of the series to appear in the chart legend. - `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. 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: , fontSize: } ` | | 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: - `'maximized'` - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. **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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | trendlines | Displays [trendlines](https://developers.google.com/chart/interactive/docs/gallery/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](https://developers.google.com/chart/interactive/docs/gallery/trendlines), expressed as either an English color name or a hex string. **Type:** `string` **Default:** default series color | | trendlines.n.degree | For [trendlines](https://developers.google.com/chart/interactive/docs/gallery/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](https://developers.google.com/chart/interactive/docs/gallery/trendlines) will appear in the legend as this string. **Type:** `string` **Default:** `null` | | trendlines.n.lineWidth | The line width of the [trendline](https://developers.google.com/chart/interactive/docs/gallery/trendlines), in pixels. **Type:** `number` **Default:** `2` | | trendlines.n.type | Whether the [trendlines](https://developers.google.com/chart/interactive/docs/gallery/trendlines) is `'linear'` (the default), `'exponential'`, or `'polynomial'`. **Type:** `string` **Default:** `linear` | | trendlines.n.visibleInLegend | Whether the [trendline](https://developers.google.com/chart/interactive/docs/gallery/trendlines) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `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`). **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: - `'none'` - Straight lines without curve. - `'function'` - The angles of the line will be smoothed. **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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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](https://developers.google.com/chart/interactive/docs/gallery/areachart) 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](https://developers.google.com/chart/interactive/docs/gallery/columnchart), [Area](https://developers.google.com/chart/interactive/docs/gallery/areachart), and [SteppedArea](https://developers.google.com/chart/interactive/docs/gallery/steppedareachart) 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](https://developers.google.com/chart/interactive/docs/gallery/barchart) 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. **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: - `'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. **Type:** `string` **Default:** `'right'` | | legendTextStyle | An object that specifies the legend text style. The object has this format: ``` { color: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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](https://developers.google.com/chart/interactive/docs/points) 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](https://developers.google.com/chart/interactive/docs/gallery/trendlines), 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) [`major`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: - `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} } ``` **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: , fontSize: } ` | | 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: - `'maximized'` - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. **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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `'auto'` - Choose based on the format of the DataTable. - `'regions'` - Color the regions on the geochart. - `'markers'` - Place markers on the regions. - `'text'` - Label the regions with text from the DataTable. **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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | region | The area to display on the geochart. Surrounding areas are displayed as well. Can be one of the following: - `'world'` - A geochart of the entire world. - A continent or a sub-continent, specified by its [3-digit code](https://developers.google.com/apps-script/chart-configuration-options#Continent_Hierarchy), e.g., `'011'` for Western Africa. - A country, specified by its [ISO 3166-1 alpha-2](http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) code, e.g., `'AU'` for Australia. - A state in the United States, specified by its [ISO 3166-2:US](http://en.wikipedia.org/wiki/ISO_3166-2:US) code, e.g., `'US-AL'` for Alabama. Note that the `resolution` option must be set to either `'provinces'` or `'metros'`. **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: - `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`). **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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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](https://developers.google.com/chart/interactive/docs/gallery/areachart) 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](https://developers.google.com/chart/interactive/docs/gallery/columnchart), [Area](https://developers.google.com/chart/interactive/docs/gallery/areachart), and [SteppedArea](https://developers.google.com/chart/interactive/docs/gallery/steppedareachart) 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](https://developers.google.com/chart/interactive/docs/gallery/barchart) 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. **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: - `'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. **Type:** `string` **Default:** `'right'` | | legendTextStyle | An object that specifies the legend text style. The object has this format: ``` { color: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) [`major`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: - `color` - The color to use for this series. Specify a valid HTML color string. - `labelInLegend` - The description of the series to appear in the chart legend. - `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. - `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} } ``` **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: , fontSize: } ` | | 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: - `'maximized'` - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. **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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `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`). **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: - `'none'` - Straight lines without curve. - `'function'` - The angles of the line will be smoothed. **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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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](https://developers.google.com/chart/interactive/docs/gallery/areachart) 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: - `'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. **Type:** `string` **Default:** `'right'` | | legendTextStyle | An object that specifies the legend text style. The object has this format: ``` { color: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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](https://developers.google.com/chart/interactive/docs/points) 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](https://developers.google.com/chart/interactive/docs/gallery/trendlines), 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) [`major`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: - `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. - `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. - `color` - The color to use for this series. Specify a valid HTML color string. - `curveType` - Overrides the global `curveType` 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. - `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. - `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} } ``` **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: , fontSize: } ` | | 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: - `'maximized'` - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. **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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | treatLabelsAsText | If set to `true`, the chart will treat the column as a text column. **Type:** `boolean` | | trendlines | Displays [trendlines](https://developers.google.com/chart/interactive/docs/gallery/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](https://developers.google.com/chart/interactive/docs/gallery/trendlines), expressed as either an English color name or a hex string. **Type:** `string` **Default:** default series color | | trendlines.n.degree | For [trendlines](https://developers.google.com/chart/interactive/docs/gallery/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](https://developers.google.com/chart/interactive/docs/gallery/trendlines) will appear in the legend as this string. **Type:** `string` **Default:** `null` | | trendlines.n.lineWidth | The line width of the [trendline](https://developers.google.com/chart/interactive/docs/gallery/trendlines), in pixels. **Type:** `number` **Default:** `2` | | trendlines.n.type | Whether the [trendlines](https://developers.google.com/chart/interactive/docs/gallery/trendlines) is `'linear'` (the default), `'exponential'`, or `'polynomial'`. **Type:** `string` **Default:** `linear` | | trendlines.n.visibleInLegend | Whether the [trendline](https://developers.google.com/chart/interactive/docs/gallery/trendlines) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `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`). **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: - `'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. **Type:** `string` **Default:** `'right'` | | legendTextStyle | An object that specifies the legend text style. The object has this format: ``` { color: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `'percentage'` - The percentage of the slice size out of the total. - `'value'` - The quantitative value of the slice. - `'label'` - The name of the slice. - `'none'` - No text is displayed. **Type:** `string` **Default:** `'percentage'` | | pieSliceTextStyle | An object that specifies the slice text style. The object has this format: ``` {color: , fontName: , fontSize: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) [`major`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | ## 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: - `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`). **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: - `'none'` - Straight lines without curve. - `'function'` - The angles of the line will be smoothed. **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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `'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. **Type:** `string` **Default:** `'right'` | | legendTextStyle | An object that specifies the legend text style. The object has this format: ``` { color: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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](https://developers.google.com/chart/interactive/docs/points) 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](https://developers.google.com/chart/interactive/docs/gallery/trendlines), 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: - `color` - The color to use for this series. Specify a valid HTML color string. - `labelInLegend` - The description of the series to appear in the chart legend. - `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. - `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} } ``` **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: , fontSize: } ` | | 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: - `'maximized'` - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. **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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | treatLabelsAsText | If set to `true`, the chart will treat the column as a text column. **Type:** `boolean` | | trendlines | Displays [trendlines](https://developers.google.com/chart/interactive/docs/gallery/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](https://developers.google.com/chart/interactive/docs/gallery/trendlines), expressed as either an English color name or a hex string. **Type:** `string` **Default:** default series color | | trendlines.n.degree | For [trendlines](https://developers.google.com/chart/interactive/docs/gallery/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](https://developers.google.com/chart/interactive/docs/gallery/trendlines) will appear in the legend as this string. **Type:** `string` **Default:** `null` | | trendlines.n.lineWidth | The line width of the [trendline](https://developers.google.com/chart/interactive/docs/gallery/trendlines), in pixels. **Type:** `number` **Default:** `2` | | trendlines.n.type | Whether the [trendlines](https://developers.google.com/chart/interactive/docs/gallery/trendlines) is `'linear'` (the default), `'exponential'`, or `'polynomial'`. **Type:** `string` **Default:** `linear` | | trendlines.n.visibleInLegend | Whether the [trendline](https://developers.google.com/chart/interactive/docs/gallery/trendlines) 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `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`). **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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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](https://developers.google.com/chart/interactive/docs/gallery/columnchart), [Area](https://developers.google.com/chart/interactive/docs/gallery/areachart), and [SteppedArea](https://developers.google.com/chart/interactive/docs/gallery/steppedareachart) 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](https://developers.google.com/chart/interactive/docs/gallery/barchart) 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. **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: - `'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. **Type:** `string` **Default:** `'right'` | | legendTextStyle | An object that specifies the legend text style. The object has this format: ``` { color: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) [`major`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: - `areaOpacity` - Overrides the global `areaOpacity` for this series. - `color` - The color to use for this series. Specify a valid HTML color string. - `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. - `labelInLegend` - The description of the series to appear in the chart legend. - `lineDashStyle` - Overrides the global `lineDashStyle` 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. - `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} } ``` **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: , fontSize: } ` | | 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: - `'maximized'` - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. **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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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`](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology) 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` | | 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: - `'enable'` - The table will include page-forward and page-back buttons. Clicking on these buttons will perform the paging operation and change the displayed page. You might want to also set the `pageSize` option. - `'event'` - The table will include page-forward and page-back buttons, but clicking them will trigger a `'page'` event and will not change the displayed page. This option should be used when the code implements its own page turning logic. See the [TableQueryWrapper example](https://developers.google.com/chart/interactive/docs/examples#tablequerywrapper) for an example of how to handle paging events manually. - `'disable'` - \[*Default*\] Paging is not supported. **Type:** `string` **Default:** `'disable'` | | 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: - `'enable'` - \[*Default* \] Users can click on column headers to sort by the clicked column. When users click on the column header, the rows are automatically sorted, and a `'sort'`event is triggered. - `'event'` - When users click on the column header, a `'sort'` event is triggered, but the rows aren't automatically sorted. This option should be used when the page implements its own sort. See the [TableQueryWrapper example](https://developers.google.com/chart/interactive/docs/examples#tablequerywrapper) for an example of how to handle sorting events manually. - `'disable'`- Clicking a column header has no effect. **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: , fontSize: } ` | | 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: \, fontSize: \} | | 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: , fontName: , fontSize: , bold: , italic: } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** `object` **Default:** ` {color: 'black', fontName: , fontSize: } ` |