Skip to main content

Chart examples (Google Image Charts)

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

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

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.