## Overview
A *column chart* is a vertical bar chart rendered in the browser using
[SVG](http://www.w3.org/Graphics/SVG/) or
[VML](http://en.wikipedia.org/wiki/Vector_Markup_Language),
whichever is appropriate for the user's browser. Like all Google
charts, column charts display tooltips when the user hovers over the
data. For a horizontal version of this chart, see
the [bar
chart](https://developers.google.com/chart/interactive/docs/gallery/barchart).
## Examples
## Coloring columns
Let's chart the densities of four precious metals:
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*](https://developers.google.com/chart/interactive/docs/roles#stylerole):
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:
```
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333'], // RGB value
['Silver', 10.49, 'silver'], // English color name
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
]);
```
## Column styles
The [style role](https://developers.google.com/chart/interactive/docs/roles#stylerole) lets your control several
aspects of column 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:
The first two columns 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 column obscures the
gridline behind it. In the third column, an `opacity` of 0.2
is used, revealing the gridline. In the fourth, 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 column additionally
uses `stroke-opacity` and `fill-opacity` to
choose opacities for the border and fill:
```
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Visitations', { role: 'style' } ],
['2010', 10, 'color: gray'],
['2020', 14, 'color: #76A7FA'],
['2030', 16, 'opacity: 0.2'],
['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
]);
```
## Labeling columns
Charts have several kinds of labels, such as tick labels, legend
labels, and labels in the tooltips. In this section, we'll see how to
put labels inside (or near) the columns in a column chart.
Let's say we wanted to annotate each column with the appropriate
chemical symbol. We can do that with the *annotation* role:
In our data table, we define a new column with `{ role:
'annotation' }` to hold our column labels:
```
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
['Copper', 8.94, '#b87333', 'Cu' ],
['Silver', 10.49, 'silver', 'Ag' ],
['Gold', 19.30, 'gold', 'Au' ],
['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
]);
```
While users can hover over the columns to see the data values, you
might want to include them on the columns themselves:
This is a little more complicated than it should be, because we
create a `DataView` to specify the annotation for each
column.
```
```
If we wanted to format the value differently, we could define a
[formatter](https://developers.google.com/chart/interactive/docs/reference#formatters)
and wrap it in a function like this:
```
function getValueAt(column, dataTable, row) {
return dataTable.getFormattedValue(row, column);
}
```
Then we could call it with `calc: getValueAt.bind(undefined, 1)`.
If the label is too big to fit entirely inside the column, it's displayed outside:
## Stacked column charts
A *stacked column chart* is a column chart that places related values atop one another. If
there are any negative values, they are stacked in reverse order below the chart's baseline. It's
typically used when a category naturally divides into components. For instance, consider some
hypothetical book sales, divided by genre and compared across time:
You create a stacked column chart by setting
the `isStacked` option to `true`:
```
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
};
```
Stacked column 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/axis values
using the relative 0-1 scale.
Stacked
```javascript
var options_stacked = {
isStacked: true,
height: 300,
legend: {position: 'top', maxLines: 3},
vAxis: {minValue: 0}
};
```
100% Stacked
```javascript
var options_fullStacked = {
isStacked: 'percent',
height: 300,
legend: {position: 'top', maxLines: 3},
vAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
```
## Creating Material column 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 Column Chart is similar to creating what we'll
now call a "Classic" Column 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.ColumnChart`).
Since bar charts and column charts are essentially identical but
for orientation, we call both Material Bar Charts, regardless of
whether the bars are vertical (classically, a column chart) or
horizontal (a bar chart). In Material, the only difference is in the
`bars` option. When set to `'horizontal'`, the
orientation will resemble the traditional Classic Bar Chart; otherwise, the
bars will be vertical.
**Note:** Material Charts will not work in old
versions of Internet Explorer. (IE8 and earlier versions don't support
SVG, which Material Charts require.)
Material Column Charts have many small improvements over Classic
Column Charts, including an improved color palette, rounded corners,
clearer label formatting, tighter default spacing between series,
softer gridlines and titles (and the addition of subtitles).
```html
```
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](https://github.com/google/google-visualization-issues/issues/2143).
Also, the way options are declared is not finalized, so if you are using any of the
classic options, you must convert your 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.
\