Bar Charts

Overview

Google bar charts are rendered in the browser using
SVG or
VML,
whichever is appropriate for the user's browser. Like all Google
charts, bar charts display tooltips when the user hovers over the
data. For a vertical version of this chart, see
the column
chart.

Examples

[This section requires a browser that supports JavaScript and iframes.]

Coloring bars

Let's chart the densities of four precious metals:

[This section requires a browser that supports JavaScript and iframes.]

Above, all colors are the default blue. That's because they're all
part of the same series; if there were a second series, that would
have been colored red. We can customize these colors
with the style role:

[This section requires a browser that supports JavaScript and iframes.]

There are three different ways to choose the colors, and our data
table showcases them all: RGB values, English color names, and a
CSS-like declaration:

Bar styles

The style role lets you control several
aspects of bar appearance with CSS-like declarations:

color

opacity

fill-color

fill-opacity

stroke-color

stroke-opacity

stroke-width

We don't recommend that you mix styles too freely inside a
chart—pick a style and stick with it—but to demonstrate
all the style attributes, here's a sampler:

[This section requires a browser that supports JavaScript and iframes.]

The first two bars each use a specific color (the
first with an English name, the second with an RGB
value). No opacity was chosen, so the default of 1.0
(fully opaque) is used; that's why the second bar obscures the
gridline behind it. In the third bar, an opacity of 0.2
is used, revealing the gridline. In the fourth bar, three style
attributes are used: stroke-color
and stroke-width to draw the border,
and fill-color to specify the color of the rectangle
inside. The rightmost bar additionally
uses stroke-opacity and fill-opacity to
choose opacities for the border and fill:

If the label is too big to fit entirely inside the bar, it's displayed outside:

[This section requires a browser that supports JavaScript and iframes.]

Stacked bar charts

A stacked bar chart is a bar chart that places related values atop one another. If there
are any negative values, they are stacked in reverse order below the chart's axis baseline.
Stacked bar charts are typically used when a category naturally divides into components. For
instance, consider some hypothetical book sales, divided by genre and compared across time:

[This section requires a browser that supports JavaScript and iframes.]

You create a stacked bar chart by setting
the isStacked option to true:

Stacked bar charts also support 100% stacking, where the stacks of elements at each
domain-value are rescaled such that they add up to 100%. The options for this are
isStacked: 'percent', which formats each value as a percentage of 100%, and
isStacked: 'relative', which formats each value as a fraction of 1. There is also
an isStacked: 'absolute' option, which is functionally equivalent to
isStacked: true.

Note in the 100% stacked chart on the right, the tick values are based on the relative
0-1 scale as fractions of 1, but the axis values are displayed as percentages. 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 using the
relative 0-1 scale.

[This section requires a browser that supports JavaScript and iframes.]

Creating Material bar charts

In 2014, Google announced guidelines intended to support a common
look and feel across its properties and apps (such as Android apps)
that run on Google platforms. We call this effort Material
Design. We'll be providing "Material" versions of all our core
charts; you're welcome to use them if you like how they look.

Creating a Material Bar Chart is similar to creating what we'll now
call a "Classic" Bar Chart. You load the Google Visualization API
(although with the 'bar' package instead of
the 'corechart' package), define your datatable, and then
create an object (but of class google.charts.Bar instead
of google.visualization.BarChart).

Note: Material Charts will not work in old
versions of Internet Explorer. (IE8 and earlier versions don't support
SVG, which Material Charts require.)

[This section requires a browser that supports JavaScript and iframes.]

The Material Charts are in beta. The appearance and
interactivity are largely final, but many of the options available in Classic Charts are not yet
available in them. You can find a list of options that are not yet supported in
this issue.

Also, the way options are declared is not finalized, so if you are using any of
the classic options, you must convert them to material options by replacing this line:

chart.draw(data, options);

...with this:

chart.draw(data, google.charts.Bar.convertOptions(options));

Using google.charts.Bar.convertOptions() allows you to take advantage of certain
features, such as the hAxis/vAxis.format preset options.

[This section requires a browser that supports JavaScript and iframes.]

Dual-X charts

Note: Dual-X axes are available only for
Material charts (i.e., those with package bar).

Sometimes you'll want to display two series in a bar chart, with
two independent x-axes: a top axis for one series, and a bottom axis
for another:

[This section requires a browser that supports JavaScript and iframes.]

Note that not only are our two x-axes labeled differently
("parsecs" versus "apparent magnitude") but they each have their own
independent scales and gridlines. If you want to customize this
behavior, use the hAxis.gridlines options.

In the code below, the axes and series
options together specify the dual-X appearance of the
chart. The series option specifies which axis to use for
each ('distance' and 'brightness'; they
needn't have any relation to the column names in the
datatable). The axes option then makes this chart a
dual-X chart, placing the 'apparent magnitude' axis on
the top and the 'parsecs' axis on the bottom.

Configuration options

The easing function applied to the animation. The following options are available:

'linear' - Constant speed.

'in' - Ease in - Start slow and speed up.

'out' - Ease out - Start fast and slow down.

'inAndOut' - Ease in and out - Start slow, speed up, then slow down.

Type: string

Default: 'linear'

animation.startup

Determines if the chart will animate on the initial draw. If true, the chart will
start at the baseline and animate to its final state.

Type: boolean

Default false

annotations.alwaysOutside

In Bar
and
Column charts, if set to true, draws all annotations
outside of the Bar/Column.

Type: boolean

Default: false

annotations.datum

For charts that support
annotations,
the annotations.datum object lets you override
Google Charts' choice for annotations provided for individual
data elements (such as values displayed with each bar on a bar
chart). You can control the color
with annotations.datum.stem.color, the stem length
with annotations.datum.stem.length, and the style with annotations.datum.style.

Type: object

Default: color is "black"; length is 12; style is "point".

annotations.domain

For charts that support
annotations,
the annotations.domain object lets you override
Google Charts' choice for annotations provided for a domain (the
major axis of the chart, such as the X axis on a typical line
chart). You can control the color
with annotations.domain.stem.color, the stem length
with annotations.domain.stem.length, and the style with annotations.domain.style.

Type: object

Default: color is "black"; length is 5; style is "point".

annotations.boxStyle

For charts that support
annotations,
the annotations.boxStyle object controls the appearance of the boxes
surrounding annotations:

[This section requires a browser that supports JavaScript and iframes.]

This option is currently supported for area, bar, column, combo, line, and scatter charts. It
is not supported by the
Annotation Chart.

Type: object

Default: null

annotations.highContrast

For charts that support
annotations,
the annotations.highContrast boolean lets you override Google Charts' choice of
the annotation color. By default, annotations.highContrast is true, which causes
Charts to select an annotation color with good contrast: light colors on dark backgrounds, and
dark on light. If you set annotations.highContrast to false and don't specify
your own annotation color, Google Charts will use the default series color for the annotation:

[This section requires a browser that supports JavaScript and iframes.]

Type: boolean

Default: true

annotations.stem

For charts that support
annotations,
the annotations.stem object lets you override
Google Charts' choice for the stem style. You can control color
with annotations.stem.color and the stem length
with annotations.stem.length. Note that the stem
length option has no effect on annotations with
style 'line': for 'line' datum
annotations, the stem length is always the same as the text, and
for 'line' domain annotations, the stem extends
across the entire chart.

Type: object

Default: color is "black"; length is 5 for domain annotations and 12 for datum annotations.

annotations.style

For charts that support
annotations,
the annotations.style option lets you override
Google Charts' choice of the annotation type. It can be
either 'line' or 'point'.

Type: string

Default: 'point'

annotations.textStyle

For charts that support
annotations,
the annotations.textStyle object controls the appearance of the text of
the annotation:

Whether the bars in a
Material Bar Chart
are vertical or horizontal. This option has no effect on Classic Bar Charts or Classic Column
Charts.

Type: 'horizontal' or 'vertical'

Default: 'vertical'

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

chartArea.height

Chart area height.

Type: number or string

Default: auto

chart.subtitle

For Material Charts,
this option specifies the subtitle. Only Material Charts support subtitles.

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

dataOpacity

The transparency of data points, with 1.0 being completely opaque and 0.0 fully transparent.
In scatter, histogram, bar, and column charts, this refers to the visible data: dots in the
scatter chart and rectangles in the others. In charts where selecting data creates a
dot, such as the line and area charts, this refers to the circles that appear upon hover or
selection. The combo chart exhibits both behaviors, and this option has no effect on other
charts. (To change the opacity of a trendline, see
trendline opacity
.)

Type: number

Default: 1.0

enableInteractivity

Whether the chart throws user-based events or reacts to user interaction. If false, the chart
will not throw 'select' or other interaction-based events (but will throw ready or
error events), and will not display hovertext or otherwise change depending on user input.

Type: boolean

Default: true

explorer

The explorer option allows users to pan and zoom Google charts.
explorer: {} provides the default explorer behavior, enabling users to pan
horizontally and vertically by dragging, and to zoom in and out by scrolling.

This feature is experimental and may change in future releases.

Note: The explorer only works with continuous axes (such as numbers or dates).

Type: object

Default: null

explorer.actions

The Google Charts explorer supports three actions:

dragToPan: Drag to pan around the chart horizontally and vertically. To pan
only along the horizontal axis, use explorer: { axis: 'horizontal' }.
Similarly for the vertical axis.

dragToZoom: The explorer's default behavior is to zoom in and out when the
user scrolls. If explorer: { actions: ['dragToZoom', 'rightClickToReset'] } is
used, dragging across a rectangular area zooms into that area. We recommend using
rightClickToReset whenever dragToZoom is used. See
explorer.maxZoomIn, explorer.maxZoomOut, and
explorer.zoomDelta for zoom customizations.

rightClickToReset: Right clicking on the chart returns it to the original pan
and zoom level.

Type: Array of strings

Default: ['dragToPan', 'rightClickToReset']

explorer.axis

By default, users can pan both horizontally and vertically when the explorer
option is used. If you want to users to only pan horizontally, use
explorer: { axis: 'horizontal' }. Similarly,
explorer: { axis: 'vertical' } enables vertical-only panning.

Type: string

Default: both horizontal and vertical panning

explorer.keepInBounds

By default, users can pan all around, regardless of where the data is. To ensure that users
don't pan beyond the original chart, use explorer: { keepInBounds: true }.

Type: boolean

Default: false

explorer.maxZoomIn

The maximum that the explorer can zoom in. By default, users will be able to zoom in enough
that they'll see only 25% of the original view. Setting
explorer: { maxZoomIn: .5 } would let users zoom in only far enough to see half
of the original view.

Type: number

Default: 0.25

explorer.maxZoomOut

The maximum that the explorer can zoom out. By default, users will be able to zoom out far
enough that the chart will take up only 1/4 of the available space. Setting
explorer: { maxZoomOut: 8 } would let users zoom out far enough that the chart
would take up only 1/8 of the available space.

Type: number

Default: 4

explorer.zoomDelta

When users zoom in or out, explorer.zoomDelta determines how much they zoom by.
The smaller the number, the smoother and slower the zoom.

Type: number

Default: 1.5

focusTarget

The type of the entity that receives focus on mouse hover. Also affects which entity is
selected by mouse click, and which data table element is associated with events. Can be one
of the following:

'datum' - Focus on a single data point. Correlates to a cell in the data table.

'category' - Focus on a grouping of all data points along the major axis. Correlates to a
row in the data table.

In focusTarget 'category' the tooltip displays all the category values. This may be useful
for comparing values of different series.

Type: string

Default: 'datum'

fontSize

The default font size, in pixels, of all text in the chart. You can override this using
properties for specific chart elements.

Type: number

Default: automatic

fontName

The default font face for all text in the chart. You can override this using
properties for specific chart elements.

Type: string

Default: 'Arial'

forceIFrame

Draws the chart inside an inline frame. (Note that on IE8, this option is ignored; all IE8
charts are drawn in i-frames.)

Type: boolean

Default: false

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:

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:

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

The baseline for the horizontal axis.

Type: number

Default: automatic

hAxis.baselineColor

The color of the baseline for the horizontal axis. Can be any HTML color string, for example:
'red' or '#00cc00'.

Type: number

Default: 'black'

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

A format string for numeric axis labels. This is a subset of the
ICU pattern set
. For instance, {format:'#,###%'} will display values "1,000%",
"750%", and "50%" for values 10, 7.5, and 0.5. You can also supply any of
the following:

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

{color: '#333', count: 4}

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 number of horizontal gridlines inside the chart area. Minimum value is 2. Specify -1 to
automatically compute the number of gridlines.

Type: number

Default: 5

hAxis.gridlines.units

Overrides the default format for various aspects of date/datetime/timeofday data types when
used with chart computed gridlines. Allows formatting for years, months, days, hours, minutes,
seconds, and milliseconds.

The number of horizontal minor gridlines between two regular gridlines.

Type: number

Default: 0

hAxis.minorGridlines.units

Overrides the default format for various aspects of date/datetime/timeofday data types when
used with chart computed minorGridlines. Allows formatting for years, months, days, hours,
minutes, seconds, and milliseconds.

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

Type: boolean

Default: false

hAxis.scaleType

hAxis property that makes the horizontal axis a logarithmic scale. Can be one of the following:

null - No logarithmic scaling is performed.

'log' - Logarithmic scaling. Negative and zero values are not plotted. This option is the same as setting hAxis: { logscale: true }.

'mirrorLog' - Logarithmic scaling in which negative and zero values are plotted. The plotted value of a negative number is the negative of the log of the absolute value. Values close to 0 are plotted on a linear scale.

Type: string

Default: null

hAxis.textStyle

An object that specifies the horizontal axis text style. The object has this format:

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

Type: string

Default: 'out'

hAxis.ticks

Replaces the automatically generated X-axis ticks with the specified array. Each element of
the array should be either a valid tick value (such as a number, date, datetime, or
timeofday), or an object. If it's an object, it should have a v property for
the tick value, and an optional f property containing the literal string to be
displayed as the label.

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

Specifies how to scale the horizontal axis to render the values within the chart area. The
following string values are supported:

'pretty' - Scale the horizontal values so that the maximum and minimum data values are
rendered a bit inside the left and right of the chart area. This will cause
haxis.viewWindow.min and haxis.viewWindow.max to be ignored.

'maximized' - Scale the horizontal values so that the maximum and minimum data values touch
the left and right of the chart area. This will cause haxis.viewWindow.min and
haxis.viewWindow.max to be ignored.

'explicit' - A deprecated option for specifying the left and right scale values of the
chart area. (Deprecated because it's redundant with haxis.viewWindow.min and
haxis.viewWindow.max.) Data values outside these values will be cropped. You
must specify an hAxis.viewWindow object describing the maximum and minimum
values to show.

Type: string

Default:
Equivalent to 'pretty', but haxis.viewWindow.min and
haxis.viewWindow.max take precedence if used.

hAxis.viewWindow

Specifies the cropping range of the horizontal axis.

Type: object

Default: null

hAxis.viewWindow.max

The maximum horizontal data value to render.

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

Type: number

Default: auto

hAxis.viewWindow.min

The minimum horizontal data value to render.

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

Type: number

Default: auto

height

Height of the chart, in pixels.

Type: number

Default: height of the containing element

isStacked

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

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

The options for isStacked are:

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'

legend.alignment

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

'start' - Aligned to the start of the area allocated for the legend.

'center' - Centered in the area allocated for the legend.

'end' - Aligned to the end of the area allocated for the legend.

Start, center, and end are relative to the style -- vertical or horizontal -- of the legend.
For example, in a 'right' legend, 'start' and 'end' are at the top and bottom, respectively;
for a 'top' legend, 'start' and 'end' would be at the left and right of the area,
respectively.

The default value depends on the legend's position. For 'bottom' legends, the default is
'center'; other legends default to 'start'.

Type: string

Default: automatic

legend.textStyle

An object that specifies the legend text style. The object has this format:

If set to true, will draw series from bottom to top. The default is to draw top-to-bottom.

Type: boolean

Default: false

orientation

The orientation of the chart. When set to 'vertical', rotates the axes of the
chart so that (for instance) a column chart becomes a bar chart, and an area chart grows
rightward instead of up:

[This section requires a browser that supports JavaScript and iframes.]

Type: string

Default: 'horizontal'

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:

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

The transparency of the
trendline
, from 0.0 (transparent) to 1.0 (opaque).

Type: number

Default: 1.0

trendlines.n.pointSize

Trendlines
are constucted by stamping a bunch of dots on the chart; this rarely-needed option lets you
customize the size of the dots. The trendline's lineWidth option will usually be
preferable. However, you'll need this option if you're using the global
pointSize option and want a different point size for your trendlines.

Type: number

Default: 1

trendlines.n.pointsVisible

Trendlines
are constucted by stamping a bunch of dots on the chart. The trendline's
pointsVisible option determines whether the points for a particular trendline are
visible.

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

Type: 1 or -1

Default: 1

vAxis.format

A format string for numeric or date axis labels.

For number axis labels, this is a subset of the decimal formatting
ICU pattern set
.
For instance, {format:'#,###%'} will display values "1,000%",
"750%", and "50%" for values 10, 7.5, and 0.5. You can also supply any
of the following:

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

Type: string

Default: '#CCC'

vAxis.gridlines.count

The number of vertical gridlines inside the chart area. Minimum value is 2. Specify -1 to
automatically compute the number of gridlines.

Type: number

Default: 5

vAxis.gridlines.units

Overrides the default format for various aspects of date/datetime/timeofday data types when
used with chart computed gridlines. Allows formatting for years, months, days, hours, minutes,
seconds, and milliseconds.

Overrides the default format for various aspects of date/datetime/timeofday data types when
used with chart computed minorGridlines. Allows formatting for years, months, days, hours,
minutes, seconds, and milliseconds.

vAxis property that makes the vertical axis a logarithmic scale. Can be one of the following:

null - No logarithmic scaling is performed.

'log' - Logarithmic scaling. Negative and zero values are not plotted. This option is the same as setting vAxis: { logscale: true }.

'mirrorLog' - Logarithmic scaling in which negative and zero values are plotted. The plotted value of a negative number is the negative of the log of the absolute value. Values close to 0 are plotted on a linear scale.

Type: string

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:

Replaces the automatically generated Y-axis ticks with the specified array. Each element of
the array should be either a valid tick value (such as a number, date, datetime, or
timeofday), or an object. If it's an object, it should have a v property for the
tick value, and an optional f property containing the literal string to be
displayed as the label.

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.

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.

Specifies how to scale the vertical axis to render the values within the chart area. The
following string values are supported:

'pretty' - Scale the vertical values so that the maximum and minimum data values are
rendered a bit inside the top and bottom of the chart area. This will cause
vaxis.viewWindow.min and vaxis.viewWindow.max to be ignored.

'maximized' - Scale the vertical values so that the maximum and minimum data values touch
the top and bottom of the chart area. This will cause vaxis.viewWindow.min and
vaxis.viewWindow.max to be ignored.

'explicit' - A deprecated option for specifying the top and bottom scale values of the
chart area. (Deprecated because it's redundant with vaxis.viewWindow.min and
vaxis.viewWindow.max. Data values outside these values will be cropped. You
must specify a vAxis.viewWindow object describing the maximum and minimum
values to show.

The zero-based row index where the cropping window ends. Data points at this index and
higher will be cropped out. In conjunction with vAxis.viewWindowMode.min, it
defines a half-opened range [min, max) that denotes the element indices to display. In
other words, every index such that min <= index < max will be
displayed.

The zero-based row index where the cropping window begins. Data points at indices lower
than this will be cropped out. In conjunction with vAxis.viewWindowMode.max,
it defines a half-opened range [min, max) that denotes the element indices to display. In
other words, every index such that min <= index < max will be
displayed. Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Returns an array of the selected chart entities.
Selectable entities are bars, legend entries and categories.
For this chart, only one entity can be selected at any given moment.
Extended description.

Return Type: Array of selection elements

getVAxisValue(position, optional_axis_index)

Returns the logical vertical value at position, which is an offset from the
chart container's top edge. Can be negative.

Example: chart.getChartLayoutInterface().getVAxisValue(300).

Call this after the chart is drawn.

Return Type: number

getXLocation(position, optional_axis_index)

Returns the screen x-coordinate of position relative to the chart's container.

Example: chart.getChartLayoutInterface().getXLocation(400).

Call this after the chart is drawn.

Return Type: number

getYLocation(position, optional_axis_index)

Returns the screen y-coordinate of position relative to the chart's container.

Example: chart.getChartLayoutInterface().getYLocation(300).

Call this after the chart is drawn.

Return Type: number

removeAction(actionID)

Removes the tooltip action with the requested actionID from the chart.

Return Type:none

setAction(action)

Sets a tooltip action to be executed when the user clicks on the action text.

The setAction method takes an object as its action parameter. This object should
specify 3 properties: id— the ID of the action being set, text
—the text that should appear in the tooltip for the action, and action
— the function that should be run when a user clicks on the action text.

Any and all tooltip actions should be set prior to calling the chart's draw()
method. Extended description.

Return Type:none

setSelection()

Selects the specified chart entities. Cancels any previous selection.
Selectable entities are bars, legend entries and categories.
For this chart, only one entity can be selected at a time.
Extended description.

Events

Fired when the user clicks inside the chart. Can be used to identify when the title, data
elements, legend entries, axes, gridlines, or labels are clicked.

Properties: targetID

error

Fired when an error occurs when attempting to render the chart.

Properties: id, message

onmouseover

Fired when the user mouses over a visual entity. Passes back the row and column indices of
the corresponding data table element.
A bar correlates to a cell in the data table, a legend entry to a column (row index is null),
and a category to a row (column index is null).

Properties: row, column

onmouseout

Fired when the user mouses away from a visual entity. Passes back the row and column indices
of the corresponding data table element.
A bar correlates to a cell in the data table, a legend entry to a column (row index is null),
and a category to a row (column index is null).

Properties: row, column

ready

The chart is ready for external method calls. If you want to interact with the chart, and
call methods after you draw it, you should set up a listener for this event before you
call the draw method, and call them only after the event was fired.

Properties: none

select

Fired when the user clicks a visual entity. To learn what has been selected, call
getSelection().

Properties: none

Data policy

All code and data are processed and rendered in the browser. No data is sent to any server.