Axis

You can specify which axes to display on the chart, and give them custom labels and positions, ranges.

Not all charts show axis lines by default. You can specify exactly which axes your chart should show using the chxt parameter. Default axis lines do not show numbers; you must specify an axis in the chxt parameter to show numbers.

You can choose to have your axes display numbers reflecting the data values, or you can specify custom axes. The default is to display numeric values, with values scaled to range based on your dataset. However, you can change that range using chxr to display another value range.

If you choose to use custom values, for example: "Mon, Tues, Wed", you can use the chxl parameter.

This section covers the following topics:

Visible Axes (chxt) - Which axes to display.
Axis range (chxr) - Value range for each axis.
Custom Axis Labels (chxl) - Custom values to show on the axis.
Axis Label Styles (chxs) - Color, size of axis labels.

Visible Axes

Bar, line, radar, and scatter charts show one or two axis lines by default, but these lines do not include values. To display values on your axis lines, or to change which axes are shown, you must use the chxt parameter. By default, the axis values range is based on your data, unless you scale them explicitly using the chxr property. To hide all axis lines in a line chart, specify :nda after the chart type value in the cht parameter (example: cht=lc:nda).

Syntax

chxt= <axis_1> ,..., <axis_n>

<axis> An axis to show on the chart. Available axes are:
- x - Bottom x-axis
- y - Left y-axis
- t - Top x-axis ( Enterprise+ subscription)
- r - Right y-axis ( Enterprise+ subscription)

Enterprise+ subscribers

chxt up to x,y is available for Free and Enterprise subscriptions. Charts with more than two axis requires the Enterprise+ subscription. You can specify multiple axes of the same type, for example: cht=x,x,y. This will stack two sets of x-axes along the bottom of the chart. This is useful when adding custom labels along an axis that shows numeric values (see the example below). Axes are drawn from the inside out, so if you have x,x, the first x refers to the innermost copy, the next x refers to the next outwards copy, and so on.

Example

For our first example, let's ask to display the y-axis:

cht=ls chxt=y

Now let's display the x-axis:

cht=ls chxt=y

Why not both?

cht=ls chxt=x,y

Note that unlike sparklines (cht=ls), line-charts (cht=lc) automatically display x-axis and y-axis:

cht=lc

... and you can suppress default axes in a line chart (cht=lc) by specifying :nda after the chart type.

cht=lc:nda

Enterprise+ subscribers

This example shows a line chart with an x-axis, a y-axis, a top axis (t), and a right axis ®. Because no labels are specified, the chart defaults to a range based on the dataset for all axes. Note that by default, the top and bottom axes don't show tick marks by the labels.

chxt=x,y,r,t

You can include multiple sets of labels for each axis by including the same value more than once. This example shows two sets of x and two sets of y-axes. This isn't particularly useful when using only the default axis labels, as is shown here. But you can specify custom labels for each copy of each axis, using the chxl parameter.

chxt=x,x,y,y

chxt=x,x,y,y chxl= 1:|Freezing|Hot| 3:|Low|High

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 based on the dataset 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 at the base of the first bar, the second label is centered at the base of the second bar, and so on.

chxt=x,y,r,t

Axis Range

You can specify the range of values that appear on each axis independently using the chxr parameter. Unlike in Google Image Charts the axis range is related to the data range, which make sense.

This is only behavior change between Google Image Charts and Image Charts

In Google Image Charts specifying the chxr parameter changed the scale of the axis but not the dataset scale. In Image-Charts — because we think it's was the biggest usage issue with Google Image Charts — changing the axis scale through chxr also impact the whole dataset scale.

You must make an axis visible using the chxt parameter if you want to specify its range.

To specify custom axis values, use the chxl parameter.

Syntax

Separate multiple axis label ranges using the pipe character ( | ).

chxr= <axis_index>,<start_val>,<end_val>,<opt_step> |...| <axis_index>,<start_val>,<end_val>,<opt_step>

<axis_index> Which axis to apply the range to. This is a zero-based index into the axis array specified by chxt. For example, the y-axis would be 1 in chxt=x,y.
<start_val> A number, defining the low value for this axis.
<end_val> A number, defining the high value for this axis.
<opt_step> [Optional] The count step between ticks on the axis. If there is no default step value; the step is calculated to try to show a set of nicely spaced labels.

Example

This example shows both x and y axes (chxt).

Each axis has a defined range. Because no step is 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.

Y axis will have a range from 0 to 100 (chxr).

chxt=x,y chxr=1,0,100

In this example, we are defining values (chd) from -30 to 50 and allowing them in the scale of -100,100 (chds).

The Y axis range (chxr) is set from -50 to 50 and both axis are visible (chxt).

chxt=x,y chd=t:20,30,40,50,-30,10 chds=-100,100 chxr=1,-50,50

Enterprise+ subscribers

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.

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

chxt=x,y,r chxr= 0,0,500| 1,0,200| 2,1000,0

Custom Axis Labels

You can specify custom string axis labels on any axis, using the chxl parameter. You can specify as many labels as you like. If you display an axis (using the chxt parameter) and do not specify custom labels, the standard, numeric labels will be applied. To specify a custom numeric range, use the chxr parameter instead.

Syntax

Specify one parameter set for each axis that you want to label. Separate multiple sets of labels using the pipe character (|).

<axis_index> Which axis to apply labels to. This is an index into the chxt parameter array. For example, if you have chxt=x,x,y,y then index 0 would be the first x-axis, 1 would be the second x-axis. Currently only customizing the x-axis is supported.
<label_1>| ... |<label_n> One or more labels to place along this axis. These can be string or number values; strings do not need to be in quotes. label_1 is displayed at the lowest position on the axis, and label_n is displayed at the highest position. Additional labels are spaced evenly between them. Indicate spaces with a + mark. There is no way to specify a line break in a label. Separate labels with a pipe character. Note: Do not place a pipe after the final label in the chxl parameter.

Example

This example shows how to add custom labels to two axes. Note how the values are evenly spaced, and how the last chxl value does not end with a pipe.

Labels also work in bar charts:

cht=bvs chxt=x,y chxl=0:|Jun|July|Aug| chd=t:10,40,25 chf=b0,lg,90,03a9f4,0,3f51b5,1 chs=700x190 chan=1200,easeOutBounce

This chart shows how to add custom labels to two axes. Note how the values are evenly spaced, and how the last chxl value does not end with a pipe.

chxt=x,y chxl= 0:|Jan|Feb|March|April|May| 1:|Min|Mid|Max

Enterprise+ subscribers

The example below 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). You could consider adding tick marks on the y-axis using chxs.

chxt=x,y,r,x chxl= 0:|Jan|July|Jan|July|Jan| 1:|0|50|100| 2:|A|B|C| 3:|2005|2006|2007

If you want to add a generic label to describe a whole axis (for example, to label one axis "cost" and another "student"), use the chxt property to add an additional axis on each side, then use chxl to add a single custom label to each side.

chxt=x,x,y,y chxl=1:|Martinis|3:|Score

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

chxt=x,y,r,x chxl= 0:|Jan|July|Jan|July|Jan| 2:|A|B|C| 3:|2005||2006||2007

Axis Label Styles

You can specify the font size, color for axis labels, both custom labels and default label values. All labels on the same axis have the same format. If you have multiple copies of an axis, you can format each one differently. You can also specify the format of a label string, for example to show currency symbols or trailing zeroes.

Syntax

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

chxs= <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>,<opt_skip_labels>,<opt_min_max_rotation> |...| <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>,<opt_skip_labels>,<opt_min_max_rotation>

<axis_index> The axis to which this applies. This is a zero-based index into the chxt parameter.
<opt_format_string> [Optional] This is an optional format string that, if used, follows immediately after the axis index number without an intervening comma. It starts with a literal letter N followed by the following values, all optional: The formatting string syntax is as follows: N<preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text> Here is the meaning of each element:
- <preceding_text> - Literal text to precede each value.
- *...* - An optional block wrapped in literal asterisks, in which you can specify formatting details for numbers. The following values are supported, and are all optional:
  - <number_type> - The number format, for numeric values. Choose one of the following:
  - f - [Default] Floating point format. Consider specifying precision as well with the value.
  - p - Percentage format. A % sign is appended automatically. Note: When using this format, data values from 0.0 — 1.0 map to 0 — 100% (for example, 0.43 will be shown as 43%).
  - e - Scientific notation format. (not supported, please contact our support)
  - c<CUR> - Format the number in the currency specified, with the appropriate currency marker. Replace with a three-letter currency code. Example: cEUR for Euros. You can find a list of codes on the ISO web site, although not all symbols are supported.
  - <decimal_places> - An integer specifying how many decimal places to show. The value is rounded (not truncated) to this length. Default is 2.
  - z - Display trailing zeros. Default is no.
  - s - Display group separators. Default is no.
  - x or y -Display the data from the x- or y-coordinate, as specified. The meaning of x data varies by chart type: experiment with your chart to determine what it means. Default is y.
- <following_text> - Literal text to follow each value.
<opt_label_color> [Optional] The color to apply to the axis text (but not axis line), in RRGGBB hexadecimal format. Axis line color is specified separately using <opt_axis_color>. Default is black.
<opt_font_size> [Optional] specifies the font size in pixels. This parameter is optional.
<opt_alignment> (not supported, please contact our support) Label alignment. Use -1.
<opt_axis_or_tick> [Optional] Whether to show tick marks and/or axis lines for this axis, note that the axis visibility parameter (chxt) has precedence over this parameter for axis visibility.
- l (lowercase 'L') - Draw axis line only.
- t - Draw tick marks only. Tick marks are the little lines next to axis labels.
- lt - [Default] Draw both an axis line and tick marks for all labels.
- _ - (Underscore) Draw neither axis line nor tick marks. If you want to hide an axis line, use this value.
<tick_color> [Optional] The tick mark color, in RRGGBB hexadecimal format. Default is black.
<opt_axis_color> [Optional] (not supported, please contact our support) The color of this axis line, in RRGGBB hexadecimal format.
<opt_skip_labels> [Optional] Specify s if labels on this axis should be hidden in case there are too many
<opt_min_max_rotation> [Optional] Specify the mininum (e.g. min10) or the maximum (e.g. max45) or both (min10max45) rotation degree labels on this axis could have. Default value is 0 (no rotation at all) for both parameters.

Example

Display the x-axis labels in #FF00FF with a 13px font-size and #FF0000 color for the y-axis.

&chxt=x,y &chxs=0,FF00FF,13|1,FF0000

&chxt=x,y &chxs=1N*cUSD2sz*Mil,000000

1N: style the y axis (because x is 0 and y is 1 in chxt=x,y)
cUSD: display the dollar currency
2: display 2 decimals places
z: Display trailing zeros
s Display group separators
Mil: append "Mil" to each label

The chart below is the same as above but has a label rotation of 40 degres on the x axis (the first axis declared, zero indexed, on chxt).

chxt=x,y chxs=0,min40

Chart below has an x-axis with 1 trailing zero (z) colored in black with 10px font-size and an y-axis with a $ currency suffixed by Mil, colored in #007939 with a 20px font-size.

&chxt=x,y &chxs=0N*f1z*,000000,10|1N*cUSD*Mil,007939,20

Chart below has too many labels in the x axis:

&chxs=1N**ºC,000000

Thus we use <skip_labels> (see 0,s, 0 means x axis and s means skip labels) to only let Image-Charts only display some of them:

&chxt=x,y &chxs=1N**ºC,000000|0,s

Enterprise+ subscribers -

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

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,0,t