My favorites | English | Sign in

Google Chart API

Styles

This document explains how to specify style options and marker types for your chart.

Table of Contents

Bar width and spacing

For bar charts, specify bar thickness and spacing with

chbh=
<bar width>,
<space between bars>,
<space between groups>

<bar width> should be specified in pixels. Use a instead of a pixel value to automatically resize bars, as described below. Use r instead of a pixel value to resize bars by using relative spacing, as described below.

<space between bars> and <space between groups> should be specified in pixels. These parameters are optional. If you are using r to resize bars by using relative spacing, these values should be percentage values expressed as floating point numbers. Use 0 to represent 0%, use 1.0 to represent 100%, and so on.

Parameter Description Example

chbh

Bar chart size is determined by the chs parameter. The chart is only partially visible if the size specified with chs is too small.

The default space between bars in a bar chart is 4 pixels. The default space between groups in a bar chart is 8 pixels.

If you choose a value for <space between bars> that is greater than 8, consider setting a value for <space between groups> that is greater than the value you have chosen for <space between bars>. Otherwise, your bars may appear to be grouped incorrectly.

Vertical grouped bar chart in blue and black, bars have the default width
cht=bvg
chbh omitted

Vertical grouped bar chart in blue and black, bars are automatically sized
cht=bvg
chbh=10,5,10

To automatically resize bars to fit the space available, specify

chbh=a,
<space between bars>,
<space between groups>

<space between bars> and <space between groups> should be specified in pixels. These parameters are optional.

Vertical grouped bar chart in blue and black, bars and spaces are automatically sized
cht=bvg
chbh=a

If you prefer to specify the spaces between bars and groups relative to the width of the bars, you can automatically resize bars using

chbh=r,
<space between bars>,
<space between groups>

<space between bars> and <space between groups> should be percentage values, expressed as floating point numbers. Use 0 to represent 0%, use 1.0 to represent 100%, and so on.

Vertical grouped bar chart in blue and black, bars are automatically sized, spaces expressed as percentage of chart width
cht=bvg
chbh=r,0.5,1.5

Back to top

Bar chart zero line

For bar charts, specify a zero line with

chp=
<value between 0 and 1 for data set 1>,
<value between 0 and 1 for data set n>

Provide just one value to apply the same zero line to all data sets.

Parameter Description Example

chp

In this example, a chp value of .5 places the zero line halfway up the chart. This chart uses text encoding, so that data points are placed as follows:

  • A data point with a value between 0 and 49 is placed below the zero line.
  • A data point with a value of 50 is placed on the zero line.
  • A data point with a value between 51 and 100 is placed above the zero line.

Data points that are placed on the zero line are not drawn.

Vertical bar chart with zero line half way up the chart
chp=.5
chd=t:20,35,50,10,95

chds

Alternatively, you can set a zero line by using the data scaling parameter (chds) in combination with text encoding.

The example has a data set ranging from -60 to 120. The scale is set to -80 to 140, to leave space above and below the bars.

See Text encoding with data scaling for more information.

Horizontal bar chart with two data sets: both are colored in red
chd=t:30,-60,50,120,80
chds=-80,140

Back to top

Chart margins

Specify a chart margin with

chma=
<left margin>,<right margin>,<top margin>,<bottom margin>|<legend width>,<legend height>

All margin values specified are the minimum margins around the plot area, in pixels.

The <legend width> and <legend height> parameters are optional.

Parameter Description Example

chma

In this example, the chart has a minimum margin of 30 pixels on each side. Because the chart legend is more than 30 pixels wide, the margin on the right side is set to the width of the chart legend, and is different from the other margins.

Axis labels are outside the plot area, and are therefore drawn within the margin space.

Line chart with gray background and margins on each side.
chma=30,30,30,30

To add a margin around the legend, set a value for the <legend width> and <legend height> parameters.

In this example, the legend is approximately 60 pixels wide. If you set the the <legend width> to 80 pixels, the margin extends to 20 pixels outside the legend.

Line chart with gray background and margins on each side.
chma=20,20,20,30|80,20

Back to top

Line styles

You can specify line styles for:

Line chart styles

Specify line chart styles with

chls=
<data set 1 line thickness>,<length of line segment>,<length of blank segment>|
...

<data set n line thickness>,<length of line segment>,<length of blank segment>

Parameter values are floating point numbers, and multiple line styles are separated by the pipe character (|). The first line style is applied to the first data set, the second style to the second data set, and so on.

Parameter Description Example

chls

Here the thick dashed line is specified by 3,6,3 and the thinner solid line is specified by 1,1,0.

See Chart colors for information on specifying line colors.

Line chart with one solid line and one dashed line
chls=3,6,3|1,1,0

Line and bar chart line styles

Specify line and bar chart line styles with

chm=D,<color>,<data set index>,<data point>,<size>,<priority>

where:

  • <color> is an RRGGBB format hexadecimal number.
  • <data set index> is the index of the data set on which to draw the line. The data set index is 0 for the first data set, 1 for the second data set, and so on.
  • <data point> is a number that specifies the data point on which the line will be drawn. Use one of the following formats:
    • 0 to draw a line using all of the points in the data set.
    • x:y to draw a line using a range of points from the data set. x is the first data point in the range, and y is the last data point in the range.
  • <size> is the width of the line in pixels.
  • <priority> is one of the following:
    • -1 specifies that the line is drawn before all other parts of the chart. The line will be hidden if another chart element is drawn in the same place.
    • 0 specifies that the line is drawn after bars or chart lines, but before other lines. This is the default.
    • 1 specifies that the line is drawn after all other parts of the chart. If more than one line has this value, the first one specified in the chm parameter will be drawn first, the second one specified in the chm parameter will be drawn second, and so on.
Parameter Description Example
chm=D

Here's an example of a data line on a bar chart. The priority is set to 1, so that the line is drawn in front of the bars.

This example uses two data series. The first series is used to draw bars on the chart, and the second series is used as an invisible guide for the data line. See Using multiple data series for more information.

Bar chart with line marker
chm=
D,0033FF,1,0,5,1
chd=s1:
1XQbnf4,43ksfg6

Here's an example of a line chart, drawn with chm=D.

Line chart with two blue lines
chm=
D,C6D9FD,1,0,8|
D,4D89F9,0,0,4

Back to top

Grid lines

Specify grid lines with

chg=
<x axis step size>,
<y axis step size>,
<length of line segment>,
<length of blank segment>
<x offset>,
<y offset>

The <x axis step size> and <y axis step size> parameters are required. All other parameters are optional.

Parameter Description Example

chg

This example uses only the <x axis step size> and <y axis step size> parameters. The Chart API displays a dashed grid line by default.

Line chart with 5 vertical and two horizontal pale gray dashed grid lines
chg=20,50

This example uses the <length of line segment> and <length of blank segment> parameters to display a lighter style of grid lines.

Line chart with 5 vertical and two horizontal faint, pale gray, dashed grid lines
chg=20,50,1,5

To display solid grid lines, specify zero (0) for the <length of blank segment> parameter.

Line chart with 5 vertical and two horizontal pale gray, solid grid lines
chg=20,50,1,0

To draw grid lines which are offset from the x-axis, specify a value for the <x offset> parameter.

To draw grid lines which are offset from the y-axis, specify a value for the <y offset> parameter.

Line chart with 5 vertical and two horizontal pale gray, solid grid lines
chg=20,50,3,3,10,20

Back to top

Shape markers

For line charts, radar charts, bar charts, and scatter plots, specify shape markers with

chm=
<marker type>,<color>,<data set index>,<data point>,<size>,<priority>|
...
<marker type>,<color>,<data set index>,<data point>,<size>,<priority>

Where:

  • <marker type> is one of the following characters:
    • a creates an arrow.
    • c creates a cross.
    • d creates a diamond.
    • o creates a circle.
    • s creates a square.
    • v creates a vertical line from the x-axis to the data point.
    • V creates a vertical line across the chart.
    • h creates a horizontal line across the chart.
    • x creates an x shape.
  • <color> is an RRGGBB format hexadecimal number.
  • <data set index> is the index of the data set on which to draw the marker. The data set index is 0 for the first data set, 1 for the second data set, and so on.
  • <data point> is a floating point value that specifies the data point on which the marker will be drawn. Use one of the following formats:
    • 0 to draw a marker on the first data point, 1 to draw a marker on the second data point, and so on. Use a decimal number to interpolate a marker between two data points.
    • -1 to draw a marker on each data point.
    • -n to draw a marker on every n-th data point.
    • x:y:n to draw a marker on every n-th data point in a range, where x is the first data point in the range, and y is the last data point in the range.
    • x:y to draw a marker at a specific point. Add the at character (@) before the marker type to use this option. Specify the coordinates as floating point values, where 0:0 is the bottom left corner of the chart, 0.5:0.5 is the center of the chart, and 1:1 is the top right corner of the chart. For example, to add a red, 15-pixel diamond to the center of a chart, use @d,FF0000,0,0.5:0.5,15.
    • n to draw a horizontal line. Specify a floating point number for the location of the line, where 0.0 is the bottom of the chart, and 1.0 is the top of the chart.
  • <size> is the size of the marker in pixels.
  • <priority> is one of the following:
    • -1 specifies that the marker is drawn before all other parts of the chart. The marker will be hidden if another chart element is drawn in the same place.
    • 0 specifies that the marker is after bars or lines, but before other markers. This is the default.
    • 1 specifies that the marker is drawn after all other parts of the chart. If more than one marker has this value, the first one specified in the chm parameter will be drawn first, the second one specified in the chm parameter will be drawn second, and so on.
    This parameter is optional.

Multiple markers are separated using the pipe character (|).

Parameter Description Example

chm

Here's an example of the full set of shape and line markers.

Line chart with 20 pixel red cross, 20 pixel green diamond, 9 pixel
  purple arrow, 12 pixel orange circle, 11 pixel blue square, 1 pixel pale gray
  vertical line, 1 pixel blue vertical line, and 20 pixel yellow cross, all drawn on the data points of a dashed green line. A thin black horizontal line intersects the vertical line v at point 7
chm=
c,FF0000,0,1,20.0|
d,80C65A,0,2,20.0|
a,990066,0,3,9.0|
o,FF9900,0,4,12.0|
s,3399CC,0,5,11.0|
v,BBCCED,0,6,1.0|
V,3399CC,0,7,1.0|
x,FFCC33,0,8,20.0|
h,000000,0,0.30,0.5

Here's an example of marker type s on a scatter plot.

See the Scatter plot section for details on setting the size of each data point.

Scatter plot with 10 pixel red square markers
chm=
s,FF0000,1,1.0,10.0

Here's an example using diamonds for one data set, and circles for the other data set.

If two or more markers occupy the same point, the markers are drawn in the order in which they appear in the chm parameter. Here, the circle is the first marker specified with chm, so it is drawn first. The diamond is specified and drawn second, which results in it being drawn on top of the circle.

Line chart, one line has 15 pixel circles on each data point the other
  line has 10 pixel diamonds. A diamond is drawn on the point that is common to both lines
chm=
o,FF9900,0,-1,15.0|
d,FF0000,1,-1,10.0

Here's a bar chart with text as a marker.

Bar chart with text markers
chm=
tApril+mobile+hits,000000,0,0,13|
tMay+mobile+hits,000000,0,1,13,-1|
tApril+desktop+hits,000000,1,0,13|
tMay+desktop+hits,000000,1,1,13

Here's a line chart with a marker on every second data point.

Line chart with marker on every second point
chm=
o,0066FF,0,-2.0,6

Back to top

Range markers

For line charts, radar charts, bar charts, and scatter plots specify horizontal and vertical range markers with

chm=
<r or R>,<color>,<any value>,<start point>,<end point>|
...
<r or R>,<color>,<any value>,<start point>,<end point>

Where:

  • <r or R> is r for a horizontal range and R for a vertical range.
  • <color> is an RRGGBB format hexadecimal number.
  • <any value> is ignored.
  • <start point> is the position at which the range starts.
    • For horizontal range markers, the <start point> value is a position on the y-axis, where 0.00 is the bottom of the chart, and 1.00 is the top of the chart.
    • For vertical range markers, the <start point> value is a position on the x-axis, where 0.00 is the left of the chart, and 1.00 is the right of the chart.
  • <end point> is the position at which the range ends.
    • For horizontal range markers, the <end point> value is a position on the y-axis, where 0.00 is the bottom of the chart, and 1.00 is the top of the chart.
    • For vertical range markers, the <end point> value is a position on the x-axis, where 0.00 is the left of the chart, and 1.00 is the right of the chart.

Multiple range markers are separated using the pipe character (|).

Parameter Description Example

chm=r

Range markers can be a thin line or a band of color. In this example, the first marker is a pale blue band (E5ECF9), and the second is a black line (000000).

Line chart with a pale blue horizontal band stretching from 25 percent to 75 percent of the way up the y-axis and a thin horizontal line ten percent of the way up the y-axis
chm=
r,E5ECF9,0,0.75,0.25|
r,000000,0,0.1,0.11
chm=R

This example shows the vertical range markers. The first marker is a red line (FF0000), and the second is a pale blue band (A0BAE9).

Line chart with a pale blue vertical band stretching from 25 percent to 75 percent of the way along the x-axis and a thin vertical line ten percent of the way along the x-axis
chm=
R,FF0000,0,0.1,0.11|
R,A0BAE9,0,0.75,0.25
chm=
R...|r...

The last marker specified takes precedence over previous markers. Here, the horizontal markers are specified last. This means that they are drawn on top of the vertical markers.

Line chart with a blue vertical band and paler blue horizontal band stretching from 25 percent to 75 percent of the way along the x and y-axis respectively. Thin vertical red line and thin horizontal black line ten percent of the way along the x and y-axis respectively
chm=
R,FF0000,0,0.1,0.11|
R,A0BAE9,0,0.75,0.25|
r,E5ECF9,0,0.75,0.25|
r,000000,0,0.1,0.11

chm=r

Here's an example of a line chart that uses range markers to draw faint horizontal lines across the chart.

Sparkline with single yellow line and three equally spaced horizontal lines
chm=
r,000000,0,0.499,0.501|
r,000000,0,0.998,1.0|
r,000000,0,0.0,0.002

Back to top

Financial markers

For line charts, and vertical bar charts, specify financial markers with:

chm=
F,<color>,<data set index>,<data point>,<size>,<priority>

Where:

  • <color> is an RRGGBB format hexadecimal number. This parameter is optional.
  • <data set index> is the index of the data set on which to draw the marker. The data set index is 0 for the first data set, 1 for the second data set, and so on.
  • <data point> is a number that specifies the data point on which the marker will be drawn. Use one of the following formats:
    • 0 to draw a marker on the first data point, 1 to draw a marker on the second data point, and so on. Use a decimal number to interpolate a marker between two data points.
    • -1 to draw a marker on each data point.
    • -n to draw a marker on every n-th data point.
    • x:y:n to draw a marker on every n-th data point in a range, where x is the first data point in the range, and y is the last data point in the range.
  • <size> is the width of the rectangle in pixels.
  • <priority> is one of the following:
    • -1 specifies that the marker is drawn before all other parts of the chart. The marker will be hidden if another chart element is drawn in the same place.
    • 0 specifies that the marker is drawn after bars or chart lines, but before other markers. This is the default.
    • 1 specifies that the marker is drawn after all other parts of the chart. If more than one marker has this value, the first one specified in the chm parameter will be drawn first, the second one specified in the chm parameter will be drawn second, and so on.

To draw financial markers, your chart must include at least four data sets. The bottom of the vertical line is drawn on the data set provided in the <data set index>. The bottom of the rectangle is drawn on the next data set. The top of the rectangle is drawn on the data set which has an index of <data set index> + 2, and the top of the vertical line is drawn on the data set which has an index of <data set index> + 3.

Multiple markers are separated using the pipe character (|).

Parameter Description Example

chm

Here's an example of financial markers on a line chart with four data sets. The rectangle is filled in blue when the value of the point in the third data set is higher than the value of the same point in the second data set.

Line chart with four orange lines and four financial markers
chm=
F,0000FF,0,1:4,20

Here's an example of the same chart, using the default colors. Omit the <color> parameter to use these colors.

Although five data sets are provided, only one is displayed. See Using multiple data series for more details.

Line chart with one orange line and four financial markers.
chm=
F,,1,1:4,20

Back to top