How to replace Google Image Charts with QuickChart

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:

Migrating from Google Image Charts

Just replace chart.googleapis.com with quickchart.io in the URL.

For example, the URL: https://chart.googleapis.com/chart?cht=bvg&chs=300x200&chd=t:5,5,5|10,10,10|15,15,15&chco=4d89f9,c6d9fd,00B88A&chds=0,20&chbh=a&chxs=0,000000,0,0,_&chxt=y&chm=N,000000,0,,10|N,000000,1,,10|N,000000,2,,10

Google Image Charts

Should be changed to: https://quickchart.io/chart?cht=bvg&chs=300x200&chd=t:5,5,5|10,10,10|15,15,15&chco=4d89f9,c6d9fd,00B88A&chds=0,20&chbh=a&chxs=0,000000,0,0,_&chxt=y&chm=N,000000,0,,10|N,000000,1,,10|N,000000,2,,10

QuickChart equivalent

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")
  • 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:

cht=a:30,50,-1000,1234

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).

chdl=NASDAQ|FTSE100|DOW

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.

chf=bg,s,e0e0e0

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.

chg=10,10

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.

chl=Jan|Feb|Mar|Apr

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.

chm=N,000000,1|N,000000,1|...|

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).

chtt=Site+visitors+by+month

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 ( | ).

Full axis range documentation

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

chxl=|2001|2002|2003

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: 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

chxs=0N*cUSD*Mil,000000

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

chxt=x,y&cht=bvs&chd=s:cEj9U&chco=76A4FB&chls=2.0&chs=300x200&chxl=0:|2001|2002|2003&chxp=0,0

Horizontal bar charts

cht=bhs&chs=300x200&chd=t:10,50,60,80,40|50,60,100,40,20&chco=4d89f9,c6d9fd&chbh=20&chds=0,160
cht=bhs&chco=000000,FF0000|00FF00|0000FF&chs=300x200&chd=s:FOE,elo&chxt=x,y&chxl=1:|Dec|Nov|Oct|0:||20K||60K||100K|
cht=bhs&chco=FF0000|00FF00|0000FF,FFC6A5|DEF3BD|C6EFF7&chs=300x200&chd=s:FOE,elo&chxt=x,y&chxl=1:|Dec|Nov|Oct|0:||20K||60K||100K|

Line Charts

cht=lc&chco=FF0000,00FF00,0000FF&chs=300x200&chd=s:FOETHECat,lkjtf3asv,KATYPSNXJ&chxt=x,y&chxl=0:|Oct|Nov|Dec|1:||20K||60K||100K
chxt=x,y&chxl=0:%7CJan%7CFeb%7CMarch%7CApril%7CMay%7C1:%7CMin%7CMid%7CMax&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=300x200

Pie Charts

cht=pc&chd=s:Helo,Wrld&chs=200x100

GraphViz Charts

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:

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]}

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:

/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'
}