Parameters (Google Image Charts)
Chart type (cht)
cht=<chart_type>This is a required parameter that specifies the type of chart that is rendered. Accepted values include:
- Bar charts
- bhg: Horizontal bar chart with grouped bars
- bvg: Vertical bar chart with grouped bars
- bhs: Horizontal bar chart with stacked bars
- bvs: Vertical bar chart with stacked bars
- bvo: Vertical bar chart with stacked bars in front of one another (automatically downgraded to "bvs")
- Line charts
- lc: Line chart
- ls: Sparkline (line chart without axes)
- Pie charts
- p: Pie chart
- pc: Concentric pie chart
- p3: 3D pie chart (automatically downgraded to "p")
- Graph visualizations
- gv: GraphViz chart
Chart data (chd)
chd=<format>:data1,data2,data3...This is a required parameter that sets data for your chart.
QuickChart supports all the data formats offered by Google Image Charts, including basic text format, text format with custom scaling, simple encoding format, and extended encoding format.
If you're looking for something easier than Google's cryptic encoding formats, we support an additional "automatic" format a, which accepts a comma-delimited list of values without requiring any special encoding. For example:
Chart size (chs)
chs=<width>x<height>Width and height in pixels.
Chart legend text and style (chdl, chdlp, chdls)
Legend labels: chd=<series_label_1>|<series_label_2>|<series_label_3>|...
Legend position: chlp=<position>
Legend style: chdls=<font_color>,<font_size>
Legend labels are strings delimited by "|".
The "position" value should be one of: b, t, r, l, corresponding to bottom, top, left, right.
The "style" tuple takes a hexidecimal font color (e.g. 00aaff) followed by font size in pixels (e.g. 14).
Chart fill (chf)
chf=<fill_type>,s,<color>fill_type is either the string bg (for background fill) or a (for transparent fill). In most cases, you should choose bg.
color is the hex color of the chart background, e.g. 00aaff. Transparency is supported, e.g. 00aaffbb.
For backwards compatibility purposes, if fill type a is selected, QuickChart will expect an 8-digit hex code but apply only the last two alpha digits to change chart transparency.
If you are looking to color bar charts, we recommend that you use the chco param instead.
Series color (chco)
chco= <series_1_element_1>|...|<series_1_element_n>,<series_2>,...,<series_m>Each entry in this string is an RRGGBB format hexadecimal number. Colors that apply to a whole series are delimited by a comma, colors that apply to individual elements within a series are delimited by a bar.
For example 00aaff,ff0000,00ff00 is a valid input. Transparency is supported, e.g. 00aaffbb.
Chart grid lines (chg)
chg=<x_axis_enabled>,<y_axis_enabled>If set to any non-zero number, the axis will display grid lines. Currently not all Google Image Charts gridline options are implemented.
Data labels (chl)
chl=<label_value_1>|<label_value_2>|<label_value_3>|...Labels are applied consecutively to the data points in chd. If you have multiple series, labels are applied to all points in all sequences in the order specified in chd. Empty labels are allowed.
Text and data value markers (chm)
chm= <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement> |...| <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>Currently QuickChart only uses the series_index parameter, which determines whether data labels are shown for a given data series provided in the chd parameter.
Future support for data label colors, size, etc is planned. For more detail, see the full Google Image Charts documentation.
Visible axes (chxt)
chxt= <axis_1> ,..., <axis_n>Specific which axis to display. This is used to specify how other axis parameters are applied. Accepted values are: x, y, x,y, or y,x.
Currently we do not support Google Image Charts-style multiple axes (e.g. 2+ X-axes or 2+ Y-axes). To render a graph with multiple axis, use the main API.
Chart title and style (chtt, chts)
Chart title: chtt=<chart_title>
Chart style: chts=<font_color>,<font_size>
Chart title is a string that is displayed atop the chart. You can insert newlines by using the "|" character.
Chart style is determined by font color, a hex code (e.g. 00aaff) and font size in pixels (e.g. 14).
Axis ranges (chxr)
chxr= <axis_index>, <start_val>, <end_val>, <opt_step> | ...Specify the range of values that appear on each axis independently using the chxr parameter. Note that unlike the Google Image Charts API, scaling the axes also scales the presentation of the chart.
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.
Separate multiple axis label ranges using the pipe character ( | ).
Axis labels (chxl)
chxl= <axis_index>:|<label_1>|...|<label_n> |...| <axis_index>:|<label_1>|...|<label_n>Specify custom string axis labels on any axis using the chxl parameter. If you display an axis (using the chxt parameter) and do not specify custom labels, numeric labels will be applied.
axis_index: Which axis to apply labels to. This is an index into the chxt parameter array. For example, if you have chxt=x,y then index 0 would be the x-axis, 1 would be the y-axis.
<label_1>| ... |<label_n>: One or more labels to place along this axis. These can be string or number values. Separate labels with a pipe character.
Full axis labels documentation
Axis label styles (chxs) {chxs-param}
chxs= <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color> |...| <repeated>You can specify the font size, color, alignment, and label format for axis labels. All labels on an axis share the same format.
axis_index: Which axis to apply labels to. This is an index into the chxt parameter array. For example, if you have chxt=x,y then index 0 would be the x-axis, 1 would be the y-axis.
opt_format_string: An optional format string that, if used, follows immediately after the axis index number without an intervening comma. It starts with a letter "N" followed by a command-separated list of values, all options.
The formatting string syntax is as follows:
N<preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>
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<decimal_places>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.c<*CUR*>- Format the number in the currency specified, with the appropriate currency marker. Replace<*CUR*>with a three-letter currency code. Example:cEURfor 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.s- Display group separators. Default is no.
<*following_text*>- Literal text to follow each value.
Full axis label styles documentation
Chart.js converter
Existing Google Image Charts users may be interested in converting their charts to Chart.js. The format is flexible, open-source, and therefore much more future-proof than a proprietary chart format. Also, you can use Chart.js in the browser to enable interactivity.
Obtain an equivalent Chart.js JSON config by appending format=chartjs-config to your Google Image Charts request. The response will look something like this:
/chart?cht=pc&chd=s:Helo,Wrld&chs=200x100&format=chartjs-config
{
data: {
labels: [ 0, 1, 2, 3 ],
datasets: [
{
data: [ 22, 43, 37, 29 ],
fill: false,
backgroundColor: undefined,
borderColor: undefined,
borderWidth: 2,
pointRadius: 0
},
{
data: [ 7, 30, 37, 40 ],
fill: false,
backgroundColor: undefined,
borderColor: undefined,
borderWidth: 2,
pointRadius: 0
}
]
},
options: {
plugins: {
datalabels: {
display: false
}
},
legend: {
display: false
},
layout: {
padding: { left: 0, right: 0, top: 10, bottom: 0 }
}
},
type: 'pie'
}