My favorites | English | Sign in

Google Chart API

Labels

This document explains how to add labels to your chart.

Table of Contents

  1. Chart title
  2. Chart legend Updated!
  3. Pie chart labels
  4. Google-o-meter labels
  5. Axis styles and labels Updated!
  6. Data point labels New!

Chart title

Specify a chart title with

chtt=<chart title>

Parameter Description Example

chtt

Specify a space with a plus sign (+).

Use a pipe character (|) to force a line break.

 

 Vertical bar chart with title
chtt=Site+visitors+by+month|
January+to+July

Optionally, you can also set the title's color and size with

chts=<color>,<font size>

 Vertical bar chart with blue, 20 pixel, title
chtt=Site+visitors
chts=FF0000,20

Back to top

Chart legend

Specify a legend with

chdl=<data set 1 label>|<data set n label>

Parameter Description Example

chdl

Specify labels in the same order as your data sets. The legend will use the same colors as your chart uses. To specify colors for your chart, see Chart colors.

In these examples, the first data set is drawn in red, the second in green and the third in blue.

 Red, blue, and green line chart with matching legends
chdl=NASDAQ|FTSE100|DOW
chco=FF0000,00FF00,0000FF
Venn diagram with two smaller circles enclosed by a larger circle
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdl and chdlp

Use chdl with the chdlp parameter to specify the legend's position.

To draw the legend in a horizontal row, use one of the following options:

  • chdlp=b places the legend at the bottom of the chart.
  • chdlp=t places the legend at the top of the chart.

To draw the legend in a vertical column, use one of the following options:

  • chdlp=bv places the legend at the bottom of the chart.
  • chdlp=tv places the legend at the top of the chart.
  • chdlp=r places the legend to the right of the chart.
  • chdlp=l places the legend to the left of the chart.

Venn diagram with two smaller circles enclosed by a larger circle
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=t

Venn diagram with two smaller circles enclosed by a larger circle
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=bv

Back to top

Pie chart labels

For a pie chart, specify labels with

chl=
<label 1 value>|
...
<label n value>

You can specify a missing value by using two consecutive pipe characters (||).

Parameter Description Example
chl

Labels for a three-dimensional pie chart.

Three dimensional pie chart with May, June, July, August, September and October labels for each segment

chl=May|Jun|Jul|Aug|Sep|Oct
chs=220x100

When specifying the size of your chart with chs, consider how long your labels are.

Generally, a two-dimensional pie chart needs to be approximately twice as wide as it is high, and a three dimensional pie chart needs to be approximately two and a half times wider than it is high, to display labels properly.

In this example, the labels are only partially displayed, because the chart is not wide enough.

Three dimensional pie chart with May, June, July, August, September and October labels for each segment

chl=May|June|July|August|
September|October
chs=220x100

This chart needs a width of 280 pixels to display the labels in full.

Three dimensional pie chart with May, June, July, August, September and October labels for each segment

chl=May|June|July|August|
September|October
chs=280x100

Back to top

Google-o-meter labels

For a Google-o-meter, specify the text that appears above the arrow with

chl=<label>

Parameter Description Example
chl Here's an example of a Google-o-meter with a label.

Google-o-meter with default red to green coloring
chl=Hello

Back to top

Axis styles and labels

Axis styles and labels are available for line charts, bar charts, radar charts, and scatter plots.

This section covers the following topics:

Axis type

Specify multiple axes with

chxt=
<axis 1>,
...
<axis n>

Available axes are:

  • x = bottom x-axis
  • t = top x-axis
  • y = left y-axis
  • r = right y-axis

When using other axis options, the axis is specified by its index in the chxt parameter. The first axis specified in the chxt parameter has an index of 0, the second has an index of 1, and so on. You can specify multiple lines for each axis by including x, t, y, or r multiple times.

Parameter Description Example

chxt

This example shows a line chart with an x-axis, a y-axis, an upper t-axis, and a right r-axis.

Axis labels are omitted, so the Chart API displays a range of 0 to 100 for all axes.

Line chart with the labels: 0, 20, 40, 60, 80, and 100 on the left and right and labels: 0, 25, 50, 75, and 100 above and below
chxt=x,y,r,t

This example shows a vertical bar chart with an x-axis, a y-axis, an upper t-axis, and a right r-axis.

Axis labels are omitted, so the Chart API displays a range of 0 to 100 for the y-axis and for the r-axis.

The range for the x-axis and for the t-axis is determined by the number of bars. In this case, there are five bars, so the Chart API displays a range of 0 to 4. The first label is centered underneath the first bar, the second label is centered underneath the second bar, and so on.

Line chart with the labels: 0, 20, 40, 60, 80, and 100 on the left and right and labels: 0, 25, 50, 75, and 100 above and below
chxt=x,y,r,t

This example shows a horizontal bar chart with an x-axis, a y-axis, an upper t-axis, and a right r-axis.

Axis labels are omitted, so the Chart API displays a range of 0 to 100 for the x-axis and for the t-axis.

The range for the y-axis and for the r-axis is determined by the number of bars. In this case, there are five bars, so the Chart API displays a range of 0 to 4. The first label is centered underneath the first bar, the second label is centered underneath the second bar, and so on.

Line chart with the labels: 0, 20, 40, 60, 80, and 100 on the left and right and labels: 0, 25, 50, 75, and 100 above and below
chxt=x,y,r,t

For the sake of brevity, only vertical bar charts are discussed in the remainder of this document.
The behavior of the x-axis and the t-axis in a horizontal bar chart is the same as the behavior of the y-axis and the r-axis in a vertical bar chart.
The behavior of the y-axis and the r-axis in a horizontal bar chart is the same as the behavior of the x-axis and the t-axis in a vertical bar chart.

Back to top

Axis labels

Specify labels with

chxl=
<axis index>:|<label 1>|<label n>|
...
<axis index>:|<label 1>|<label n>

The index parameter specifies the index of the axis to which the labels apply. Separate each label by using a pipe character (|).

The first label specified is placed at the start of the axis, and the last label specified is placed at the end of the axis. Other labels are uniformly spaced between the first label and the last label.

Parameter Description Example

chxt and chxl

This example includes axis labels on the left and right y-axes (y and r). It also includes two sets of values for the x-axis (x).

x-axis labels on a line chart are centered beneath the x-axis.

Line chart with 0 and 100 on the left, A, B, and C on the right, Jan, July, Jan, July, and Jan on the x-axis and 2005, 2006 and 2007 below
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|50|100|
2:|A|B|C|
3:|2005|2006|2007

This example includes axis labels on the left and right y-axes (y and r). It also includes two sets of values for the x-axis (x).

This example uses default values for the axis labels on the left y-axis.

On a bar chart, the first x-axis label specified is centered under the first bar, the second x-axis label specified is centered under the second bar, and so on.

Bar chart with 0 and 100 on the left, A, B, and C on the right, Jan, July, Jan, July, and Jan on the x-axis and 2005, 2006 and 2007 below
chxl=
0:|Jan|July|Jan|July|Jan|
2:|A|B|C|
3:|2005||2006||2007

Back to top

Axis label positions

Specify label positions with

chxp=
<axis index>,<label 1 position>,<label n position>|
...
<axis index>,<label 1 position>,<label n position>

Use floating point numbers for position values. By default, the label position is used for label text. To set label text, use the chxl parameter.

Parameter Description Example

chxp

This example includes r-axis labels at specified positions on the chart. The label text is specified using the chxl parameter.

Labels with a specified position of 0 are placed at the bottom of the y- or r-axis, or at the left of the x- or t-axis.

Labels with a specified position of 100 are placed at the top of the y- or r-axis, or at the right of the x- or t-axis.

Line chart with min, average, and max on the right, 20, 40, 60, 80, and 100 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y,r
chxl=2:|min|average|max
chxp=2,10,35,75|

This example includes y-axis labels at specified positions on the chart.

No label text is specified for these labels. Therefore, the label position is displayed as the text for each label.

Line chart with 10, 35, and 75 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y
chxp=1,10,35,75|

Back to top

Axis range

Specify a range for axis labels with

chxr=
<axis index>,<start of range>,<end of range>,<interval>|
...
<axis index>,<start of range>,<end of range>,<interval>

The <interval> parameter is optional. Separate multiple axis label ranges by using the pipe character (|).

Parameter Description Example

chxr

This example shows left and right y-axes (y and r) and one x-axis (x).

Each axis has a defined range. Because no labels or positions are specified, values are taken from the given range, and are evenly spaced within that range. In the line chart, values are evenly spread along the x-axis. In the bar chart, a value is centered beneath each bar.

Axis direction is reversed for the r-axis (index 2), because the first value (1000) is larger than the last value (0).

Line chart with 0, 50, 100, 150, and 200 on the left, 1000, 800, 600, 400, 200, and 0 on the right and 250 and 500 on the x-axis

Bar chart with 0, 50, 100, 150, and 200 on the left, 1000, 800, 600, 400, 200, and 0 on the right and 100, 200, 300, 400 and 500 on the x-axis
chxt=x,y,r
chxr=0,100,500|
1,0,200|
2,1000,0

In these examples, values are specified for the x-axis.

Axis labels are evenly spaced along the axis. A value of five (5) is specified for the <interval> parameter.

Line chart with 200, 300, and 400 on the x-axis

Bar chart with 200, 300, and 400 on the x-axis
chxt=x
chxr=0,10,50,5

Back to top

Axis styles

Specify font size, color, and alignment for axis labels with

chxs=
<axis index>,<axis color>,<font size>,<alignment>,<drawing control>,<tick mark color>|
...
<axis index>,<axis color>,<font size>,<alignment>,<drawing control>,<tick mark color>|

where:

  • <axis index> is the axis index as specified in chxt.
  • <axis color> is an RRGGBB format hexadecimal number.
  • <font size> specifies the font size in pixels. This parameter is optional.
  • <alignment> is one of the following:
    • -1 to make the axis labels left-aligned.
    • 0 to make the axis labels centered.
    • 1 to make the axis labels right-aligned.
    By default, x--axis labels and t-axis labels are centered, y-axis labels are right-aligned, and r-axis labels are left-aligned. This parameter is optional.
  • <drawing control> is one of the following:
    • l to draw axis lines only.
    • t to draw tick marks only.
    • lt to draw axis lines and tick marks.
    This parameter is optional.
  • <tick mark color> is an RRGGBB format hexadecimal number. This parameter is optional.

Values for multiple axes should be separated using a pipe character (|).

Parameter Description Example

chxs

Font size and color are specified for the second x-axis (Jan, Feb, Mar).

Line chart with min, average, and max on the left, 0, 1, 2, 3, and 4 on the right, 0 to 100 along the x-axis and Jan, Feb, and Mar in blue below

chxt=x,y,r,x
chxr=2,0,4
chxl=3:|Jan|Feb|Mar|
     1:|min|average|max
chxp=1,10,35,75
chxs=3,0000DD,13

Font size, color, and alignment are specified for the right y-axis. Tick marks, but no axis line, are drawn.

Line chart with 0 to 100 along the x-axis, Jan, Feb, Mar below, 0 to 4 on the y-axis, and red tickmarks with blue text for min, average and max on the right.

chxt=x,y,r,x
chxl=3:|Jan|Feb|Mar|
     2:|min|average|max
chxp=2,10,35,95
chxs=2,0000DD,13,-1,t,FF0000

chxs and chxtc

Use chxs with chxtc to specify the length of tick marks, as follows:

chxtc=
<axis index>,<length of tick mark>

Positive values are drawn outside the chart area. The maximum positive value is 25.

Negative values are drawn inside the chart area.

Use this feature to draw gridlines on a chart.

Line chart with 0 to 100 along the x-axis, Jan, Feb, Mar below, 0 to 4 on the y-axis, and long red tickmarks with blue text for min, average and max on the right.

chxt=x,y,r,x
chxp=2,10,35,95
chxs=2,0000DD,13
chxtc=1,10|2,-180

Back to top

Data point labels

Add labels to data points on line charts, bar charts, radar charts, and scatter plots with:

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

Where:

  • <label type> is one of the following characters:
    • f creates a flag.
    • t creates plain text.
    • N creates a number.
  • <label contents> is the text of the label, for f and t labels. Number labels are discussed below.
  • <color> is an RRGGBB format hexadecimal number.
  • <data set index> is the index of the data set on which to draw the label. 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 label will be drawn. Use one of the following formats:
    • 0 to draw a label on the first data point, 1 to draw a label on the second data point, and so on.
    • -1 to draw a label on each data point.
    • -n to draw a label on every n-th data point.
    • x:y:n to draw a label 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 size of the text in points.
  • <priority> is one of the following:
    • -1 specifies that the label is drawn before all other parts of the chart. The label will be hidden if another chart element is drawn in the same place.
    • 0 specifies that the label is drawn after bars or lines, but before other labels. This is the default.
    • 1 specifies that the label is drawn after all other parts of the chart. If more than one label 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.

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

Parameter Description Example

chm

 

Here's an example of a chart with a text label at the minimum point, and a flag label at the maximum point.

Line chart with 10pt blue text label, and flag with 15pt red text, drawn on the data points of a dashed green line.
chm=
tMin,0000FF,0,1,10|
fMax,FF0000,0,3,15

Here's an example of a number label on a bar chart.

The number for a number label comes directly from the data series that you provide. The <label contents> values for a number label are all optional, but include the following options:

<text before the number>
*<number type><precision level><z><s><coordinate>*
<text after the number>

Where:

  • <number type> is one of the following:
    • f to use a floating point number.
    • p to use a percentage value.
    • e to use scientific notation.
    • c<CUR> to use a currency value.
      • To use a currency value, specify a three letter currency code as the value for the <CUR> parameter.
  • <precision level> is an integer that specifies how many decimal places are used.
  • <z> displays trailing zeros.
  • <s> displays group separators.
  • <coordinate> specifies which coordinate to display. Use one of the following:
    • x to display the value of the x-coordinate at the chosen data point.
    • y to display the value of the y-coordinate at the chosen data point.

Bar chart with percentage labels above each bar
chm=
N*p0*,000000,0,-1,11

Bar chart with Euro labels above each bar
chm=
N*cEUR1*,000000,0,-1,11

Back to top