Skip to content

Bar Charts

This section describes the various types of bar charts that you can create using the Image Chart API.

Overview

There are a variety of bar charts that you can create, including vertical, horizontal, grouped, stacked versions of each.

Bar charts are good for side-by-side comparison and spotting trends in a small number of discrete data points. They're a good alternative to line charts when you have only a few data points in a series.

There are three general ways to show multiple series in a bar chart:

  • Grouped vertically bvg

chart

cht=bvg chd=t:5,5,5|10,10,10|15,15,15

  • Grouped horizontally bhg

chart

cht=bhg chd=t:5,5,5|10,10,10|15,15,15

  • Stacked vertically bvs

chart

cht=bvs chd=t:5,5,5|10,10,10|15,15,15

  • Stacked horizontally bhs

chart

cht=bhs chd=t:5,5,5|10,10,10|15,15,15

Missing

Google Image Charts supported the bvo chart type in which vertical bars were stacked in front of one another. This type of chart is not planned to be supported and will automatically falls back to the bvs type.

Rounded Bar

It's always nice to display bar charts with rounded corner. Specify a corner radius (in pixel) with the chbr query parameter.

chbr=10

rounded bar chart

chbr=20

chart

Series Colors

Tip

You can specify the colors of individual bars, individual series, or multiple series using the chco parameter. If you don't specify a different color for each series, all series will have the same color.

Syntax

chco=<series_1_color>, ..., <series_n_color> or chco=<series_1_bar_1>|<series_1_bar_2>|...|<series_1_bar_n>,<series_2>,...,<series_n>

  • <color>: An RRGGBB[AA] format hexadecimal number to apply to a series or individual bar. To apply the color to the whole series, it should be comma-delimited. To apply the color to an individual bar, it should be pipe-delimited. You can mix these two formats. See the table below for examples. Whenever you have fewer color values than data points or series, the colors will cycle through the list again, starting from the first color in that group.

Examples

One color per series, with comma-delimited colors.

chart

cht=bvs chco=CFECF7,27c9c2

One color per value, with pipe-delimited colors.

chart

cht=bvs chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE

A combination of series colors and individual bar colors.

This example shows a bar chart with two series. The first series all black (000000,) and comma-delimited. The second series is pipe-delimited, and assigns a different color for each point (FF0000|00FF00|0000FF).

chart

chco=000000,8AC1E7|7f3f98|fdb45c chd=s:FOE,elo

This example demonstrates setting different colors for every bar in a multi-series chart.

chart

You can also specify fills to color a series with solid or gradient colors. Solid fills look the same as using chco, but gradients (chf=b<index>,lg,...) create unique effects.

Gradient fills:

chart

chd=t:10,40,60,80,30,20 chf=b0,lg,0,fdb45c,0,ed7e30,1

Solid fills:

chart

chd=t:40,40,60,80|30,50,55,86 chf=b0,ls,0,72BD60,.3,517D47,.1|b1,ls,0,2F5627,.3,E67233,.1

There are a variety of bar charts that you can create, including vertical, horizontal, grouped, stacked versions of each.