My favorites | English | Sign in

Faster JavaScript with Closure Tools New!

Google Chart API

Colors

This document explains how to specify the colors you want to use in your chart.

Table of Contents

  1. Specifying colors
  2. Chart colors
  3. Fill area
  4. Solid fill
  5. Linear gradient
  6. Linear stripes

Specifying colors

Specify chart colors with a 6-letter string of hexadecimal values in the format RRGGBB. For example:

  • FF0000 = red
  • 00FF00 = green
  • 0000FF = blue
  • 000000 = black
  • FFFFFF = white

You can optionally specify transparency by appending a hexadecimal value between 00 and FF, where 00 is completely transparent and FF is completely opaque. For example:

  • 0000FFFF = solid blue
  • 0000FF00 = transparent blue

Back to top

Chart colors

Specify colors for line charts, bar charts, Venn diagrams, Google-o-meters, radar charts, maps, scatter plots, and pie charts with

chco=
<color 1>,
...
<color n>

Where each <color> is an RRGGBB format hexadecimal number.

Specify a color for each data point within a single data set by separating the color parameters by using the pipe character (|). This feature is available for bar charts, pie charts, scatter plots and maps.

Parameter Description Example

chco

This example has three data sets and three colors specified.

Line chart with one red, one blue, and one green line

chco=FF0000,00FF00,0000FF

This example also has three data sets, but only two colors are specified. Because the color for the third data set is unspecified, the third line is drawn in the first color (red).

If you specify fewer colors than data sets, the first data set with unspecified colors uses the first specified color, the second data set with unspecified colors uses the second specified color, and so on.

Line chart with two red lines and one blue line

chco=FF0000,0000FF

For bar charts, if there are fewer colors than data sets, the first bar with unspecified colors will use the first specified color, the second bar with unspecified colors will use the second specified color, and so on.

In the following chart, the third data set, Bar, is drawn in the first color. If only one color is specified, all data sets use that color.

Horizontal bar chart with one data set in red the second in green and the third in red

chco=FF0000,00FF00
chd=s:FOE,THE,Bar

Here's the same chart with three colors specified.

Horizontal bar chart with one data set in red, the second stacked in green, and the third in blue

chco=FF0000,00FF00,0000FF
chd=s:FOE,THE,Bar

This example shows a bar chart with two data sets. The first data set is shown in black (000000), and the second data set uses a different color for each point.

Horizontal bar chart with one data point in red, the second in green, and the third in blue

chco=000000,FF0000|00FF00|0000FF
chd=s:FOE,elo

For pie charts, if there are fewer color than slices, then colors are interpolated.

Three dimensional pie chart with segments interpolated from dark to pale blue

chco=0000FF
For Venn diagrams, if there are fewer colors than circles, the last color specified is repeated.

Venn diagram with three overlapping circles, one circle is blue the others are green
chco=00FF00,0000FF
For Google-o-meters, specify at least two colors. To control the color gradient across the Google-o-meter, specify more colors. Google-o-meter with rainbow coloring
chco=FF0000,FF8040,FFFF00,
00FF00,00FFFF,
0000FF,800080

Back to top

Fill area

Specify a fill area with

chm=
b,<color>,<start line index>,<end line index>,<any value>|
...
b,<color>,<start line index>,<end line index>,<any value>

Where:

  • <color> is an RRGGBB format hexadecimal number.
  • <start line index> is the index of the line at which the fill starts. The first data set specified in chd has an index of zero (0), the second data set has an index of 1, and so on.
  • <end line index> is the index of the line at which the fill ends. The first data set specified in chd has an index of zero (0), the second data set has an index of 1, and so on.
  • <any value> is ignored.

Multiple fill areas are separated using the pipe character (|).

Parameter Description Example

chm=b

Specify the data set with the largest values first.

To fill from the top of the chart to the first line, include a data set which contains only the highest data value (100.0, 9, or .. depending on the data format used). This value should be repeated twice in the data set.

To fill from the last line to the bottom of the chart include a data set which contains only the lowest data value (0, A, or AA depending on the data format used). This value should be repeated twice in the data set.

The lines themselves are drawn in black, using chco, as described in Chart colors.

 

Three lines on a chart; chart is shaded in green from bottom to first line, red from first to second line, dark blue from second to third line and pale blue from third line to top of the chart
chd=e:
....,
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,
AAAA

chm=
b,76A4FB,0,1,0| (light blue)
b,224499,1,2,0| (blue)
b,FF0000,2,3,0| (red)
b,80C65A,3,4,0 (green)

chco=000000,000000,000000,
000000,000000

By contrast, the first and last data sets (.... and AAAA) have been removed for this chart.

The chco parameter is also omitted, so that lines are drawn in the default color (yellow).

Three lines on a chart; chart no shading from bottom to first line, red from first to second line, dark blue from second to third line and no shading from third line to top of the chart. Lines are drawn in default yellow
chd=s:
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,

chm=
b,224499,0,1,0| (blue)
b,FF0000,1,2,0| (red)
b,80C65A,2,3,0 (green)

chm=B

For a single data set, it is simpler to use chm=B. This fills the entire area under the line.

This is the only fill area type available for radar charts. chm=b does not work with radar charts.

Single line on a chart with shading in blue from the bottom of the chart to the line
chm=B,76A4FB,0,0,0
chd=s:ATSTaVd21981uocA

Back to top

Solid fill

Specify solid fill with

chf=
<fill type>,s,<color>|
<fill type>,s,<color>

Where:

  • <fill type> is:
    • bg for background fill
    • c for chart area fill
    • a to apply transparency to the whole chart.
  • s indicates solid fill.
  • <color> is an RRGGBB format hexadecimal number.
  • the pipe character (|) separates fill definitions. No pipe character is required after the second definition.

You can specify:

  • background, chart area fill, and transparency for line charts and scatter plots.
  • background fill and transparency for bar charts, pie charts, and Venn diagrams.
  • background fill for maps and radar charts.
Parameter Description Example

chf

This example fills the image background with pale gray (EFEFEF).

Red line chart with pale gray background

chf=bg,s,EFEFEF

This example fills the background with pale gray (EFEFEF) and fills the chart area in black (000000).

Scatter plot with points in blue, chart area in black, and pale gray background

chf=bg,s,EFEFEF|
c,s,000000

This example shows the effect of specifying transparency using the hexadecimal values of 20 for the background and 80 for the chart area.

Scatter plot with points in blue, chart area in dark gray, and very pale gray background

chf=bg,s,EFEFEF20|
c,s,00000080
This example applies transparency to the whole chart.

Scatter plot with points in blue, chart area and background in white

chf=a,s,EFEFEFF0

Back to top

Linear gradient

Specify linear gradient for line charts, bar charts, Venn diagrams, radar charts, and scatter plots with

chf=<fill type>,lg,<angle>,<color 1>,<offset 1>,<color n>,<offset n>

Where:

  • <fill type> is one of the following:
    • bg for background fill
    • c for chart area fill.
  • lg specifies linear gradient.
  • <angle> specifies the angle of the gradient between 0 (horizontal) and 90 (vertical).
  • <color> is a RRGGBB format hexadecimal number.
  • <offset> specifies at what point the color is pure. In this parameter, 0 specifies the right-most chart position and 1 specifies the left-most chart position.
Parameter Description Example

chf

Chart area has a horizontal (left to right) linear gradient, specified with an angle of zero degrees (0).

Blue (76A4FB) is the first color specified. The right side of the chart is pure blue.

White (FFFFFF) is the second color specified. The left side of the chart is pure white.

The chart background is drawn in gray (EFEFEF).

Dark gray line chart with pale gray background and chart area in a white to blue linear gradient from left to right

chf=
c,lg,0,76A4FB,1,FFFFFF,0|
bg,s,EFEFEF

Chart area has a diagonal (bottom left to top right) linear gradient, specified with an angle of forty-five degrees (45).

White (FFFFFF) is the first color specified. The bottom left of the chart is pure white.

Blue (6A4FB) is the second color specified. The top right of the chart is pure blue.

The chart background is drawn in gray (EFEFEF).

Dark gray line chart with pale gray background and chart area in a white to blue diagonal linear gradient from bottom left to top right

chf=
c,lg,45,FFFFFF,0,76A4FB,0.75|
bg,s,EFEFEF

Chart area has a vertical (top to bottom) linear gradient, specified with an angle of ninety degrees (90).

Blue (76A4FB) is the first color specified. The top of the chart is pure blue.

White (FFFFFF) is the second color specified. The bottom of the chart is pure white.

The chart background is drawn in gray (EFEFEF).

Dark gray line chart with pale gray background and chart area in a white to blue vertical linear gradient from bottom to top

chf=
c,lg,90,76A4FB,0.5,FFFFFF,0|
bg,s,EFEFEF

Back to top

Linear stripes

Specify linear stripes for line charts, bar charts, Venn diagrams, radar charts, and scatter plots with

chf=<fill type>,ls,<angle>,<color 1>,<width 1>,<color n>,<width n>

Where:

  • <fill type> is one of the following:
    • bg for background fill
    • c for chart area fill.
  • ls specifies linear stripes.
  • <angle> specifies the angle of the gradient relative to the y-axis. Use 0 for vertical stripes, or 90 for horizontal stripes.
  • <color> is an RRGGBB format hexadecimal number.
  • <width> must be between 0 and 1, where 1 is the full width of the chart. Stripes are repeated until the chart is filled.
Parameter Description Example

chf

Chart area with stripes whose angle is zero (0). Angle is measured relative to the y-axis.

The first stripe is drawn using the first color specified (dark gray, CCCCCC). The width of the first stripe is 15% of the width of the chart.

The second stripe is drawn using the second color specified (white, FFFFFF). The width of the second stripe is 10% of the width of the chart.

Stripes alternate until the chart is filled.

The stripes fill the chart background as well as the plot area.

Blue line chart with alternating gray and white stripes from left to right

chf=bg,ls,0,CCCCCC,0.2,
FFFFFF,0.1

Chart area with horizontal stripes whose angle is ninety degrees (90).

The first stripe is drawn using the first color specified (the darkest gray, 999999). The height of the first stripe is 25% of the height of the chart.

The second and third stripes are drawn in the second and third colors specified (the lighter gray, CCCCCC, and white, FFFFFF). The width of these stripes is also 25% of the width of the chart.

Stripes alternate until the chart is filled.

The stripes fill the plot area, but the chart background is omitted.

Blue line chart with a dark gray, pale gray, white and dark gray stripes from bottom to top

chf=
c,ls,90,
999999,0.25,
CCCCCC,0.25,
FFFFFF,0.25

Back to top