What would you call a table added to the bottom of your chart?

• Students
• Staff
• Schools & services
• Sussex Direct
• Canvas

Excel 2013 and Excel 2016

Arrange your data so that headings are directly above and to the left of the data to be charted. There should be no blank rows or columns. Make sure that you select the headings as well as the data before you create your chart.

If you have already created your chart:

1. Click on the chart to select it.
2. Click the Chart Filters button.
3. Click Select Data... at the bottom right of the dialog.
4. In the Select Data Source dialog box under Horizontal (Category) Axis Labels, click Edit.
5. In the Axis label range enter the cell references for the x-axis or use the mouse to select the range, click OK.
6. In the dialog box under Legend Entry Series, select the first series and click Edit
7. In the Series name box, enter the cell reference for the name of the series or use the mouse to select the cell, click OK.
8. Repeat for each series of data.
9. Click OK.

Excel 2010

Arrange your data so that headings are directly above and to the left of the data to be charted. No blank rows or columns. Make sure that you select the headings as well as the data before you create your chart.

If you have already created your chart:

1. Click on the chart to select it.
2. From the Chart Tools, Layout tab, Current Selection group, select the Horizontal (Category) Axis
3. From the Design tab, Data group, select Select Data.
4. In the dialog box under Horizontal (Category) Axis Labels, click Edit.
5. In the Axis label range enter the cell references for the x-axis or use the mouse to select the range, click OK.
6. Click OK.
7. Make sure that the chart is still selected.
8. From the Chart Tools, Layout tab, Current Selection group, select the Vertical (Value) Axis.
9. From the Design tab, Data group, select Select Data.
10. In the dialog box under Legend Entry Series, select the first series and click Edit
11. In the Series name box, enter the cell reference for the name of the series or use the mouse to select the cell, click OK.
12. Repeat for each series.
13. Click OK.

Please suggest an improvement
(login needed, link opens in new window)

Your views are welcome and will help other readers of this page.

This is question number 264, which appears in the following categories:

A column chart is a vertical bar chart rendered in the browser using SVG or VML, 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.

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:

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:

Column styles

The style role 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:

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:

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 and wrap it in a function like this:

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:

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.

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

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 your to material options by replacing this line:

chart.draw(data, options);

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.

Dual-Y charts

Sometimes you'll want to display two series in a column chart, with two independent Y-axes: a left axis for one series, and a right axis for another:

Note that not only are our two y-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 vAxis.gridlines options.

In the code below, the axes and series options together specify the dual-Y 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-Y chart, placing the 'distance' axis on the left (labeled "parsecs") and the 'brightness' axis on the right (labeled "apparent magnitude").

Top-X charts

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

If you want to put the X-axis labels and title on the top of your chart rather than the bottom, you can do that in Material charts with the axes.x option:

Loading

The google.charts.load package name is "corechart". The visualization's class name is google.visualization.ColumnChart.

For Material Column Charts, the google.charts.load package name is "bar". (Not a typo: the Material Bar Chart handles both orientations.) The visualization's class name is google.charts.Bar. (Not a typo: the Material Bar Chart handles both orientations.)

Data format

Each row in the table represents a group of adjacent bars.

Rows: Each row in the table represents a group of bars.

Columns:

Configuration options

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