Getting Started
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:
- QuickChart is an open-source service that renders static chart images. You can host your own server using the source code or a Docker container, or you can use the reliable QuickChart.io web service and not worry about hosting.
- This page is for people looking to replace existing Google Image Charts implementations. To start from scratch with QuickChart, go to the main documentation.
- If you're starting fresh, use the open-source Chart.js format instead of Google Image Charts format. It's more flexible, has a strong community, and will never be deprecated.
Migrating from Google Image Charts
Just replace chart.googleapis.com with quickchart.io in the URL.
Should be changed to: https://quickchart.io/chart?cht=bvg&chs=300x200
Supported Parameters
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.
Parameter Information
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")
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.
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 multiple axes (e.g. 2+ X-axes or 2+ Y-axes).
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=
<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 Gallery
Bar charts
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.
Vertical bar charts
Horizontal bar charts
Line Charts
Pie Charts
QR Codes
Render a QR code like so:
https://quickchart.io/qr?text=Here's my text
Google-O-Meter Charts
See documentation for creating a Radial Gauge.
Other types of charts
Compound charts and multi-axis charts should use Chart.js syntax. See the documentation for Mixed Charts.
Converting to Chart.js
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'
}