Welcome to the QuickChart guide for replacing Google Image Charts with QuickChart. QuickChart is mostly compatible with the Google Image Charts API and serves as a drop-in replacement.
Here are a few things you should know before getting started:
Just replace chart.googleapis.com with quickchart.io in the URL.
Should be changed to: https://quickchart.io/chart?cht=bvg&chs=300x200
The most common Google Image Charts parameters are supported. The implementation of each parameter matches the Google Image Charts implementation as closely as possible.
| Parameter | Description and Syntax | Chart Types |
|---|---|---|
| cht | Chart type | Required for all charts |
| chd | Chart data string | Required for all charts |
| chs | Chart size | All charts |
| chdl, chdlp, chdls | Chart legend text and style | All charts |
| chf | Chart fill | All charts |
| chg | Chart grid lines | Bar, Line |
| chl | Data labels | Bar, Line, Pie |
| chm | Text and Data Value Markers | Bar, Line |
| chxt | Visible axes | Bar, Line |
| chtt, chts | Chart title and style | All charts |
| chxr | Axis ranges | Bar, Line |
| chxl | Axis labels | Bar, Line |
| chxs | Axis label styles | Bar, Line |
Parameter missing, or need more customization options? Don't get locked into a proprietary format. See the main documentation to use the more powerful open-source Chart.js format.
cht=<chart_type>
This is a required parameter that specifies the type of chart that is rendered. Accepted values include:
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:
chs=<width>x<height>
Width and height in pixels.
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).
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.
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.
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.
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.
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 multiple axes (e.g. 2+ X-axes or 2+ Y-axes).
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).
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 ( | ).
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
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: 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.s - Display group separators. Default is no.<following_text> - Literal text to follow
each value.
Full axis label styles documentation
Here are some examples of bar charts. Each example shows a chart generated by Google Image Charts followed by the equivalent chart generated by QuickChart.
This visualization is intended for organizational or process charts. GraphViz is a package of open source tools for visualizing connectivity graphs. You can create GraphViz graphs using the DOT language and your choice of layout engines.
cht=gv[:<opt_engine>]
In order to specify a layout engine, append a semicolon to cht and specify one of the following:
dot (default): "hierarchical" or layered drawings of directed graphs.
neato: "spring model" layout. This is a good engine if the graph is not too large (about 100 nodes) and you don't know anything else about it. Neato attempts to minimize a global energy function, which is equivalent to statistical multi-dimensional scaling.
fdp: "spring model" layout similar to neato, but works by reducing forces rather than working with energy.
twopi: Radial layouts in which nodes are placed on concentric circles depending their distance from the root node.
Note that this visualization returns in SVG format by default and auto-sizes itself. To get a PNG image, add chof=png. To size the PNG image, use chs=300x200 (width x height).
Example:
https://quickchart.io/chart?cht=gv&chl=digraph{C_0[shape=box];C_0->H_0[type=s];C_0->H_1[type=s];C_0->H_2[type=s];C_0->C_1[type=s];C_1->H_3[type=s];C_1->H_4[type=s];C_1->H_5[color=blue]}
Render a QR code like so:
https://quickchart.io/qr?text=Here's my text
See documentation for creating a Radial Gauge.
Compound charts and multi-axis charts should use Chart.js syntax. See the documentation for Mixed Charts.
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:
{
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'
}