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.
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:
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)
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.
For our first example, let's ask to display the y-axis:
Now let's display the x-axis:
Why not both?
Note that unlike sparklines (
cht=ls), line-charts (
cht=lc) automatically display x-axis and y-axis:
... and you can suppress default axes in a line chart (
cht=lc) by specifying
:nda after the chart type.
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.
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
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.
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
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
<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.
This example shows both x and y axes (
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 (
In this example, we are defining values (
chd) from -30 to 50 and allowing them in the scale of -100,100 (
The Y axis range (
chxr) is set from -50 to 50 and both axis are visible (
chxt=x,y chd=t:20,30,40,50,-30,10 chds=-100,100 chxr=1,-50,50
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.
Specify one parameter set for each axis that you want to label. Separate multiple sets of labels using the pipe character (
chxl= <axis_index>:|<label_1>|...|<label_n> |...| <axis_index>:|<label_1>|...|<label_n>
<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,ythen 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
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.
cht=lc chxt=x,y chxl=0:|Jan|Feb|March|April|May chd=t:10,5,34,10,5 chco=76A4FB chls=2.0 chs=700x190
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
The example below includes axis labels on the left and right y-axes (
r). It also includes two sets of values for the x-axis (x). You could consider adding tick marks on the y-axis using
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.
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.
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
<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
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>[Optional] (not supported, please contact our support) Label alignment.
<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.
sif 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.
Display the x-axis labels in
#FF00FF with a 13px font-size and
#FF0000 color for the y-axis.
1N: style the y axis (because x is 0 and y is 1 in
cUSD: display the dollar currency
2: display 2 decimals places
z: Display trailing zeros
sDisplay group separators
Mil: append "Mil" to each label
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.
Chart below has too many labels in the x axis:
Thus we use
0,s, 0 means x axis and
s means skip labels) to only let Image-Charts only display some of them: