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.

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=4D89F9,C6D9FD

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,FF0000|00FF00|0000FF
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, striped, or gradient colors. Solid fills look the same as using chco, but stripes or gradients create unique effects.

chart

chd=t:10,40,60,80,30,20
chf=b0,lg,0,FFE7C6,0,76A4FB,1

chart

chd=t:40,40,60,80|30,50,55,86
chf=b0,ls,0,FFE7C6,.3,76A4FB,.1|b1,ls,0,FF0000,.3,FFBFBF,.1