Docs
Open Lodol
DocumentationIntegrationsAPI

Image-Charts

App · Images & Design · 10 actions

Turn data into chart pictures for emails, chat messages and documents with Image-Charts: bar, line, pie, doughnut, radar and scatter charts, sparklines, progress bars, QR codes, GraphViz diagrams and Chart.js charts. Each comes back as a permanent link that shows the picture anywhere an image can go, with an HTML image tag, and can be saved as a file. Works without an account, with a small watermark and up to 10 charts a minute; an Image-Charts subscription's account ID and secret key remove the watermark and raise the limit.

Actions

ActionWhat it does
Create a bar chartDraw a bar chart from labels and one or more series of numbers: vertical or horizontal, grouped or stacked, optionally with each bar's value on it and a prefix or suffix such as $ or % on the numbers.
Create a Chart.js chartDraw any Chart.js 2.8 chart from its configuration: bar, line, pie, doughnut, radar, polar area, bubble or scatter, with the datasets, colours and options Chart.js takes, except JavaScript functions.
Create a custom chartDraw any chart Image-Charts supports from its own parameters (cht, chd, chs and the rest), or from a chart link made in the Image-Charts editor, changing any parameters you give, such as its data.
Create a GraphViz diagramDraw a diagram, such as a flowchart, an org chart or a network, from a GraphViz graph written in the DOT language, laid out by the engine you choose, as a PNG or an SVG at the graph's own size.
Create a line chartDraw a line chart from one or more series of numbers, with labels along the bottom, optionally shading the area under each line; or a sparkline, a small trend line with no axes, to sit in a sentence or a table.
Create a pie chartDraw a pie, doughnut or polar area chart from labels and their values, with names, values or percentages on the slices, a legend if you like, and text in the middle of a doughnut.
Create a progress barDraw a progress bar filled to a percentage, with the percentage written on it, for a goal, a course or a loyalty status in an email.
Create a QR codeMake a QR code for a link or any other text, up to 4,296 characters, as a PNG or an SVG, in your colours and with the error correction you choose.
Create a radar chartDraw a radar (spider) chart comparing one or more series across three or more labels, one spoke each, such as skills or product scores, optionally shading inside each series.
Create a scatter chartDraw a scatter chart of points given by their x and y values, in one or more series, or a bubble chart when each point also has a size.

Create a bar chart

Draw a bar chart from labels and one or more series of numbers: vertical or horizontal, grouped or stacked, optionally with each bar's value on it and a prefix or suffix such as $ or % on the numbers. Returns a link to the picture that shows it in any email, chat message or document, an HTML image tag, and the picture as a file if asked.

Inputs

LabelslabelstextRequired
The name of each bar, or group of bars, in order, separated by commas (or one per line), such as Q1, Q2, Q3. A list works too.
SeriesserieslistRequired
One or more series, each with a name for the legend and its values, one for each label. Several series are drawn side by side, or stacked.
Titletitletext
Text above the chart. A line break in it starts a second line. Leave empty for none.
Horizontalhorizontaltrue/false
Draw the bars across instead of up, the first at the top. Off by default.Default: false.
Stackedstackedtrue/false
Stack several series' bars on top of each other instead of side by side. Off by default.Default: false.
Show valuesshow_valuestrue/false
Write each bar's value on it. Off by default.Default: false.
Value prefixvalue_prefixtext
Text before each number on the value axis, and on the bars' values, such as $ or EUR. Up to 10 characters, without *, commas or |.
Value suffixvalue_suffixtext
Text after each number on the value axis, and on the bars' values, such as % or k. Up to 10 characters, without *, commas or |.
Colorscolorstext
One colour for each series, as hex codes such as #4E79A7 or names such as navy, separated by commas; with a single series, several colours colour its bars one by one. Anything left over takes a ten-colour palette.
Legend positionlegend_positiontext
Where the legend of series names goes: bottom (the default), right, top or left, or no legend. There is only a legend when a series has a name.One of: bottom, right, top, left, none (No legend). Default: bottom.
Widthwidthnumber
The chart's width in pixels, from 1 to 999. Defaults to 600.From 1 to 999. Default: 600.
Heightheightnumber
The chart's height in pixels, from 1 to 999. Defaults to 400.From 1 to 999. Default: 400.
Background colorbackground_colortext
The colour behind the chart, as a hex code such as #FFFFFF, a name such as white, or transparent. White if left empty.
Animatedanimatedtrue/false
Draw the chart growing into place as an animated GIF, for an email or a chat message. Off by default. A GIF is several times the size of the still picture.Default: false.
Also save the chart as a filesave_as_filetrue/false
Off by default, because the link is all an email, a chat message or a document needs. Turn it on when a later step needs the file itself: attaching it to an email, uploading it to storage, or posting it as a file.Default: false.

Outputs

content_typetext
The saved file's type, e.g. image/png, or '' when not saved.
document_reftext
The saved file's document reference, or '' when not saved.
documentslist
The saved chart as a document, ready to attach to a later step. Empty when it was not saved.
file_size_bytesnumber
The saved file's size in bytes, or 0 when not saved.
file_urltext
A URL that serves the saved file, or '' when not saved.
formattext
What the picture is: png, gif for an animated chart, or svg for a QR code or diagram drawn as SVG.
heightnumber
The height in pixels the chart is shown at.
image_tagtext
The same link as an HTML <img> tag, with alt text and the chart's width and height, for a step that writes an email or a page.
saved_as_filetrue/false
True when the chart was also saved as a file (Also save the chart as a file). The file fields below are empty otherwise.
urltext
A permanent link to the chart's picture, signed when the connection has an Image-Charts account. It shows the chart anywhere a picture can go: an email, a chat message, a document or a web page.
watermarkedtrue/false
True when Image-Charts drew its small watermark in the top right corner: every chart but a QR code, unless the connection has an Image-Charts account.
widthnumber
The width in pixels the chart is shown at, as asked for. A diagram is shown at its own size. Chart.js charts and QR codes are drawn with more pixels than this, so they stay sharp.
Example output
{
  "content_type": "",
  "document_ref": "",
  "documents": [],
  "file_size_bytes": 0,
  "file_url": "",
  "format": "png",
  "height": 400,
  "image_tag": "<img src=\"https://image-charts.com/chart?cht=bvg&amp;chs=600x400&amp;chd=a%3A120%2C90%2C140%7C80%2C130%2C100&amp;chxt=x%2Cy&amp;chxl=0%3A%7CQ1%7CQ2%7CQ3&amp;chco=4E79A7%2CF28E2B&amp;chxs=1N%24%2Af%2Ak&amp;chl=%24120k%7C%2490k%7C%24140k%7C%2480k%7C%24130k%7C%24100k&amp;chdl=EU%7CUS&amp;chdlp=b&amp;chtt=Quarterly%20revenue&amp;chof=.png\" alt=\"Quarterly revenue\" width=\"600\" height=\"400\">",
  "saved_as_file": false,
  "url": "https://image-charts.com/chart?cht=bvg&chs=600x400&chd=a%3A120%2C90%2C140%7C80%2C130%2C100&chxt=x%2Cy&chxl=0%3A%7CQ1%7CQ2%7CQ3&chco=4E79A7%2CF28E2B&chxs=1N%24%2Af%2Ak&chl=%24120k%7C%2490k%7C%24140k%7C%2480k%7C%24130k%7C%24100k&chdl=EU%7CUS&chdlp=b&chtt=Quarterly%20revenue&chof=.png",
  "watermarked": true,
  "width": 600
}

Create a Chart.js chart

Draw any Chart.js 2.8 chart from its configuration: bar, line, pie, doughnut, radar, polar area, bubble or scatter, with the datasets, colours and options Chart.js takes, except JavaScript functions. It is drawn at twice the size asked for, so it stays sharp. Returns a link to the picture, an HTML image tag, and the picture as a file if asked.

Inputs

ChartchartobjectRequired
The Chart.js configuration, as an object or as JSON: a type, and data with labels and datasets, such as {"type": "bar", "data": {"labels": ["Q1", "Q2"], "datasets": [{"label": "Sales", "data": [120, 90]}]}}. JavaScript object syntax works too.
Widthwidthnumber
The chart's width in pixels, from 1 to 1500. Defaults to 600; the picture has twice as many pixels.From 1 to 1500. Default: 600.
Heightheightnumber
The chart's height in pixels, from 1 to 1500. Defaults to 400.From 1 to 1500. Default: 400.
Background colorbackground_colortext
The colour behind the chart, as a name such as white, a hex code such as #FCFCFC, or rgb(255,255,255). White if left empty; Image-Charts' own default is see-through.
Also save the chart as a filesave_as_filetrue/false
Off by default, because the link is all an email, a chat message or a document needs. Turn it on when a later step needs the file itself: attaching it to an email, uploading it to storage, or posting it as a file.Default: false.

Outputs

content_typetext
The saved file's type, e.g. image/png, or '' when not saved.
document_reftext
The saved file's document reference, or '' when not saved.
documentslist
The saved chart as a document, ready to attach to a later step. Empty when it was not saved.
file_size_bytesnumber
The saved file's size in bytes, or 0 when not saved.
file_urltext
A URL that serves the saved file, or '' when not saved.
formattext
What the picture is: png, gif for an animated chart, or svg for a QR code or diagram drawn as SVG.
heightnumber
The height in pixels the chart is shown at.
image_tagtext
The same link as an HTML <img> tag, with alt text and the chart's width and height, for a step that writes an email or a page.
saved_as_filetrue/false
True when the chart was also saved as a file (Also save the chart as a file). The file fields below are empty otherwise.
urltext
A permanent link to the chart's picture, signed when the connection has an Image-Charts account. It shows the chart anywhere a picture can go: an email, a chat message, a document or a web page.
watermarkedtrue/false
True when Image-Charts drew its small watermark in the top right corner: every chart but a QR code, unless the connection has an Image-Charts account.
widthnumber
The width in pixels the chart is shown at, as asked for. A diagram is shown at its own size. Chart.js charts and QR codes are drawn with more pixels than this, so they stay sharp.
Example output
{
  "content_type": "",
  "document_ref": "",
  "documents": [],
  "file_size_bytes": 0,
  "file_url": "",
  "format": "png",
  "height": 400,
  "image_tag": "<img src=\"https://image-charts.com/chart.js/2.8.0?chart=%7B%22type%22%3A%22bar%22%2C%22data%22%3A%7B%22labels%22%3A%5B%22Q1%22%2C%22Q2%22%2C%22Q3%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22Sales%22%2C%22data%22%3A%5B120%2C90%2C140%5D%7D%5D%7D%7D&amp;width=600&amp;height=400&amp;backgroundColor=white\" alt=\"Chart\" width=\"600\" height=\"400\">",
  "saved_as_file": false,
  "url": "https://image-charts.com/chart.js/2.8.0?chart=%7B%22type%22%3A%22bar%22%2C%22data%22%3A%7B%22labels%22%3A%5B%22Q1%22%2C%22Q2%22%2C%22Q3%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22Sales%22%2C%22data%22%3A%5B120%2C90%2C140%5D%7D%5D%7D%7D&width=600&height=400&backgroundColor=white",
  "watermarked": true,
  "width": 600
}

Create a custom chart

Draw any chart Image-Charts supports from its own parameters (cht, chd, chs and the rest), or from a chart link made in the Image-Charts editor, changing any parameters you give, such as its data. The chart is signed with the connection's account, so an editor chart loses its watermark too. Returns a link to the picture, an HTML image tag, and the picture as a file if asked.

Inputs

Chart URLchart_urltext
A chart's link, such as one copied from editor.image-charts.com: https://image-charts.com/chart?... or https://image-charts.com/chart.js/2.8.0?... Any account ID and signature in it are replaced. Leave empty to draw from Parameters alone.
Parametersparametersobject
Image-Charts parameters to set, added to the link or replacing its own, such as {"cht": "bvg", "chd": "a:10,20,30", "chs": "400x300"}. Set one to null to take it out. See documentation.image-charts.com for them all.
Also save the chart as a filesave_as_filetrue/false
Off by default, because the link is all an email, a chat message or a document needs. Turn it on when a later step needs the file itself: attaching it to an email, uploading it to storage, or posting it as a file.Default: false.

Outputs

content_typetext
The saved file's type, e.g. image/png, or '' when not saved.
document_reftext
The saved file's document reference, or '' when not saved.
documentslist
The saved chart as a document, ready to attach to a later step. Empty when it was not saved.
file_size_bytesnumber
The saved file's size in bytes, or 0 when not saved.
file_urltext
A URL that serves the saved file, or '' when not saved.
formattext
What the picture is: png, gif for an animated chart, or svg for a QR code or diagram drawn as SVG.
heightnumber
The height in pixels the chart is shown at.
image_tagtext
The same link as an HTML <img> tag, with alt text and the chart's width and height, for a step that writes an email or a page.
saved_as_filetrue/false
True when the chart was also saved as a file (Also save the chart as a file). The file fields below are empty otherwise.
urltext
A permanent link to the chart's picture, signed when the connection has an Image-Charts account. It shows the chart anywhere a picture can go: an email, a chat message, a document or a web page.
watermarkedtrue/false
True when Image-Charts drew its small watermark in the top right corner: every chart but a QR code, unless the connection has an Image-Charts account.
widthnumber
The width in pixels the chart is shown at, as asked for. A diagram is shown at its own size. Chart.js charts and QR codes are drawn with more pixels than this, so they stay sharp.
Example output
{
  "content_type": "",
  "document_ref": "",
  "documents": [],
  "file_size_bytes": 0,
  "file_url": "",
  "format": "png",
  "height": 300,
  "image_tag": "<img src=\"https://image-charts.com/chart?cht=p&amp;chs=400x300&amp;chd=a%3A60%2C40&amp;chl=Hello%7CWorld&amp;chtt=Hello%2C%20world\" alt=\"Hello, world\" width=\"400\" height=\"300\">",
  "saved_as_file": false,
  "url": "https://image-charts.com/chart?cht=p&chs=400x300&chd=a%3A60%2C40&chl=Hello%7CWorld&chtt=Hello%2C%20world",
  "watermarked": true,
  "width": 400
}

Create a GraphViz diagram

Draw a diagram, such as a flowchart, an org chart or a network, from a GraphViz graph written in the DOT language, laid out by the engine you choose, as a PNG or an SVG at the graph's own size. Up to 200 nodes and 400 edges. Returns a link to the picture, an HTML image tag, and the picture as a file if asked.

Inputs

DOTdottextRequired
The graph in GraphViz's DOT language, such as digraph { Idea -> Draft -> Review -> Done }. Use digraph and -> for arrows, graph and -- for plain lines.
Layoutlayouttext
How the diagram is laid out: dot (the default) in layers, for flows and hierarchies, or neato, fdp, twopi, circo or osage.One of: dot (Dot: layered, for flows and hierarchies), neato (Neato: spring model, for small networks), fdp (Fdp: spring model, for larger networks), twopi (Twopi: radial, around a centre), circo (Circo: circular), osage (Osage: nested clusters). Default: dot.
Formatformattext
A PNG picture (the default) or an SVG drawing, which stays sharp at any size.One of: png (PNG picture), svg (SVG drawing, sharp at any size). Default: png.
Also save the chart as a filesave_as_filetrue/false
Off by default, because the link is all an email, a chat message or a document needs. Turn it on when a later step needs the file itself: attaching it to an email, uploading it to storage, or posting it as a file.Default: false.

Outputs

content_typetext
The saved file's type, e.g. image/png, or '' when not saved.
document_reftext
The saved file's document reference, or '' when not saved.
documentslist
The saved chart as a document, ready to attach to a later step. Empty when it was not saved.
file_size_bytesnumber
The saved file's size in bytes, or 0 when not saved.
file_urltext
A URL that serves the saved file, or '' when not saved.
formattext
What the picture is: png, gif for an animated chart, or svg for a QR code or diagram drawn as SVG.
heightnumber
The height in pixels the chart is shown at.
image_tagtext
The same link as an HTML <img> tag, with alt text and the chart's width and height, for a step that writes an email or a page.
saved_as_filetrue/false
True when the chart was also saved as a file (Also save the chart as a file). The file fields below are empty otherwise.
urltext
A permanent link to the chart's picture, signed when the connection has an Image-Charts account. It shows the chart anywhere a picture can go: an email, a chat message, a document or a web page.
watermarkedtrue/false
True when Image-Charts drew its small watermark in the top right corner: every chart but a QR code, unless the connection has an Image-Charts account.
widthnumber
The width in pixels the chart is shown at, as asked for. A diagram is shown at its own size. Chart.js charts and QR codes are drawn with more pixels than this, so they stay sharp.
Example output
{
  "content_type": "",
  "document_ref": "",
  "documents": [],
  "file_size_bytes": 0,
  "file_url": "",
  "format": "png",
  "height": 325,
  "image_tag": "<img src=\"https://image-charts.com/chart?cht=gv&amp;chl=digraph%20%7B%20Idea%20-%3E%20Draft%20-%3E%20Review%20-%3E%20Done%3B%20Review%20-%3E%20Draft%20%7D&amp;chof=.png\" alt=\"Diagram\" width=\"111\" height=\"325\">",
  "saved_as_file": false,
  "url": "https://image-charts.com/chart?cht=gv&chl=digraph%20%7B%20Idea%20-%3E%20Draft%20-%3E%20Review%20-%3E%20Done%3B%20Review%20-%3E%20Draft%20%7D&chof=.png",
  "watermarked": true,
  "width": 111
}

Create a line chart

Draw a line chart from one or more series of numbers, with labels along the bottom, optionally shading the area under each line; or a sparkline, a small trend line with no axes, to sit in a sentence or a table. Returns a link to the picture, an HTML image tag, and the picture as a file if asked.

Inputs

Labelslabelstext
Labels along the bottom, separated by commas (or one per line), such as Jan, Feb, Mar. Usually one for each value; fewer are spread evenly along the axis. Leave empty for none.
SeriesserieslistRequired
One or more series, each with a name for the legend and its values, in order; every series needs the same number of values. An empty value leaves a gap in the line.
Titletitletext
Text above the chart. A line break in it starts a second line. Leave empty for none.
Fillfilltrue/false
Shade the area under each line. Off by default.Default: false.
Show axesshow_axestrue/false
Draw the axes, with the labels and a scale. On by default; turn it off for a sparkline, the line alone.Default: true.
Value prefixvalue_prefixtext
Text before each number on the value axis, and on the bars' values, such as $ or EUR. Up to 10 characters, without *, commas or |.
Value suffixvalue_suffixtext
Text after each number on the value axis, and on the bars' values, such as % or k. Up to 10 characters, without *, commas or |.
Colorscolorstext
One colour for each series, in order, as hex codes such as #4E79A7 or names such as navy, separated by commas. Series without one take the next colour of a ten-colour palette.
Legend positionlegend_positiontext
Where the legend of series names goes: bottom (the default), right, top or left, or no legend. There is only a legend when a series has a name.One of: bottom, right, top, left, none (No legend). Default: bottom.
Widthwidthnumber
The chart's width in pixels, from 1 to 999. Defaults to 600.From 1 to 999. Default: 600.
Heightheightnumber
The chart's height in pixels, from 1 to 999. Defaults to 400.From 1 to 999. Default: 400.
Background colorbackground_colortext
The colour behind the chart, as a hex code such as #FFFFFF, a name such as white, or transparent. White if left empty.
Animatedanimatedtrue/false
Draw the chart growing into place as an animated GIF, for an email or a chat message. Off by default. A GIF is several times the size of the still picture.Default: false.
Also save the chart as a filesave_as_filetrue/false
Off by default, because the link is all an email, a chat message or a document needs. Turn it on when a later step needs the file itself: attaching it to an email, uploading it to storage, or posting it as a file.Default: false.

Outputs

content_typetext
The saved file's type, e.g. image/png, or '' when not saved.
document_reftext
The saved file's document reference, or '' when not saved.
documentslist
The saved chart as a document, ready to attach to a later step. Empty when it was not saved.
file_size_bytesnumber
The saved file's size in bytes, or 0 when not saved.
file_urltext
A URL that serves the saved file, or '' when not saved.
formattext
What the picture is: png, gif for an animated chart, or svg for a QR code or diagram drawn as SVG.
heightnumber
The height in pixels the chart is shown at.
image_tagtext
The same link as an HTML <img> tag, with alt text and the chart's width and height, for a step that writes an email or a page.
saved_as_filetrue/false
True when the chart was also saved as a file (Also save the chart as a file). The file fields below are empty otherwise.
urltext
A permanent link to the chart's picture, signed when the connection has an Image-Charts account. It shows the chart anywhere a picture can go: an email, a chat message, a document or a web page.
watermarkedtrue/false
True when Image-Charts drew its small watermark in the top right corner: every chart but a QR code, unless the connection has an Image-Charts account.
widthnumber
The width in pixels the chart is shown at, as asked for. A diagram is shown at its own size. Chart.js charts and QR codes are drawn with more pixels than this, so they stay sharp.
Example output
{
  "content_type": "",
  "document_ref": "",
  "documents": [],
  "file_size_bytes": 0,
  "file_url": "",
  "format": "png",
  "height": 400,
  "image_tag": "<img src=\"https://image-charts.com/chart?cht=lc&amp;chs=600x400&amp;chd=a%3A10%2C40%2C25%2C60%7C20%2C30%2C45%2C35&amp;chco=4E79A7%2CF28E2B&amp;chxt=x%2Cy&amp;chxl=0%3A%7CJan%7CFeb%7CMar%7CApr&amp;chm=B%2C4E79A740%2C0%2C0%2C0%7CB%2CF28E2B40%2C1%2C0%2C0&amp;chdl=Visits%7CSignups&amp;chdlp=b&amp;chtt=Traffic&amp;chof=.png\" alt=\"Traffic\" width=\"600\" height=\"400\">",
  "saved_as_file": false,
  "url": "https://image-charts.com/chart?cht=lc&chs=600x400&chd=a%3A10%2C40%2C25%2C60%7C20%2C30%2C45%2C35&chco=4E79A7%2CF28E2B&chxt=x%2Cy&chxl=0%3A%7CJan%7CFeb%7CMar%7CApr&chm=B%2C4E79A740%2C0%2C0%2C0%7CB%2CF28E2B40%2C1%2C0%2C0&chdl=Visits%7CSignups&chdlp=b&chtt=Traffic&chof=.png",
  "watermarked": true,
  "width": 600
}

Create a pie chart

Draw a pie, doughnut or polar area chart from labels and their values, with names, values or percentages on the slices, a legend if you like, and text in the middle of a doughnut. Returns a link to the picture, an HTML image tag, and the picture as a file if asked.

Inputs

LabelslabelstextRequired
The name of each slice, in order, separated by commas (or one per line), such as Search, Direct, Social.
ValuesvaluestextRequired
Each slice's value, in the same order as the labels, separated by commas, such as 30, 45, 25. None may be negative; the slices are drawn in proportion.
Titletitletext
Text above the chart. A line break in it starts a second line. Leave empty for none.
Stylestyletext
A pie (the default), a doughnut with a hole for text, or a polar area chart, whose slices are equal angles of different lengths.One of: pie, doughnut, polar_area (Polar area). Default: pie.
Center textcenter_texttext
Text in the hole of a doughnut, such as a total like 95K. Only for the doughnut style.
Slice labelsslice_labelstext
What to write on each slice: its name (the default), its value, its percentage of the whole, or nothing. With values or percentages, add a legend for the names.One of: names, values, percentages, none (Nothing). Default: names.
Colorscolorstext
One colour for each slice, in order, as hex codes such as #4E79A7 or names such as navy, separated by commas. Slices without one take a ten-colour palette.
Legend positionlegend_positiontext
Where a legend of the slices' names goes: bottom, right, top or left. None by default, as the names are on the slices.One of: bottom, right, top, left, none (No legend). Default: none.
Widthwidthnumber
The chart's width in pixels, from 1 to 999. Defaults to 600.From 1 to 999. Default: 600.
Heightheightnumber
The chart's height in pixels, from 1 to 999. Defaults to 400.From 1 to 999. Default: 400.
Background colorbackground_colortext
The colour behind the chart, as a hex code such as #FFFFFF, a name such as white, or transparent. White if left empty.
Animatedanimatedtrue/false
Draw the chart growing into place as an animated GIF, for an email or a chat message. Off by default. A GIF is several times the size of the still picture.Default: false.
Also save the chart as a filesave_as_filetrue/false
Off by default, because the link is all an email, a chat message or a document needs. Turn it on when a later step needs the file itself: attaching it to an email, uploading it to storage, or posting it as a file.Default: false.

Outputs

content_typetext
The saved file's type, e.g. image/png, or '' when not saved.
document_reftext
The saved file's document reference, or '' when not saved.
documentslist
The saved chart as a document, ready to attach to a later step. Empty when it was not saved.
file_size_bytesnumber
The saved file's size in bytes, or 0 when not saved.
file_urltext
A URL that serves the saved file, or '' when not saved.
formattext
What the picture is: png, gif for an animated chart, or svg for a QR code or diagram drawn as SVG.
heightnumber
The height in pixels the chart is shown at.
image_tagtext
The same link as an HTML <img> tag, with alt text and the chart's width and height, for a step that writes an email or a page.
saved_as_filetrue/false
True when the chart was also saved as a file (Also save the chart as a file). The file fields below are empty otherwise.
urltext
A permanent link to the chart's picture, signed when the connection has an Image-Charts account. It shows the chart anywhere a picture can go: an email, a chat message, a document or a web page.
watermarkedtrue/false
True when Image-Charts drew its small watermark in the top right corner: every chart but a QR code, unless the connection has an Image-Charts account.
widthnumber
The width in pixels the chart is shown at, as asked for. A diagram is shown at its own size. Chart.js charts and QR codes are drawn with more pixels than this, so they stay sharp.
Example output
{
  "content_type": "",
  "document_ref": "",
  "documents": [],
  "file_size_bytes": 0,
  "file_url": "",
  "format": "png",
  "height": 400,
  "image_tag": "<img src=\"https://image-charts.com/chart?cht=p&amp;chs=600x400&amp;chd=a%3A30%2C45%2C25&amp;chco=4E79A7%7CF28E2B%7C59A14F&amp;chl=30%25%7C45%25%7C25%25&amp;chdl=Search%7CDirect%7CSocial&amp;chdlp=b&amp;chtt=Traffic%20sources&amp;chof=.png\" alt=\"Traffic sources\" width=\"600\" height=\"400\">",
  "saved_as_file": false,
  "url": "https://image-charts.com/chart?cht=p&chs=600x400&chd=a%3A30%2C45%2C25&chco=4E79A7%7CF28E2B%7C59A14F&chl=30%25%7C45%25%7C25%25&chdl=Search%7CDirect%7CSocial&chdlp=b&chtt=Traffic%20sources&chof=.png",
  "watermarked": true,
  "width": 600
}

Create a progress bar

Draw a progress bar filled to a percentage, with the percentage written on it, for a goal, a course or a loyalty status in an email. Returns a link to the picture, an HTML image tag, and the picture as a file if asked.

Inputs

PercentpercentnumberRequired
How full the bar is, from 0 to 100, such as 65 or 12.5.From 0 to 100.
Show percentshow_percenttrue/false
Write the percentage on the bar. On by default.Default: true.
Colorcolortext
The filled part's colour, as a hex code such as #4E79A7 or a name such as green. Blue if left empty.
Track colortrack_colortext
The empty part's colour, as a hex code, a name, or transparent. Light gray if left empty.
Widthwidthnumber
The bar's width in pixels, from 1 to 999. Defaults to 400.From 1 to 999. Default: 400.
Heightheightnumber
The bar's height in pixels, from 1 to 999. Defaults to 30.From 1 to 999. Default: 30.
Background colorbackground_colortext
The colour behind the chart, as a hex code such as #FFFFFF, a name such as white, or transparent. White if left empty.
Animatedanimatedtrue/false
Draw the chart growing into place as an animated GIF, for an email or a chat message. Off by default. A GIF is several times the size of the still picture.Default: false.
Also save the chart as a filesave_as_filetrue/false
Off by default, because the link is all an email, a chat message or a document needs. Turn it on when a later step needs the file itself: attaching it to an email, uploading it to storage, or posting it as a file.Default: false.

Outputs

content_typetext
The saved file's type, e.g. image/png, or '' when not saved.
document_reftext
The saved file's document reference, or '' when not saved.
documentslist
The saved chart as a document, ready to attach to a later step. Empty when it was not saved.
file_size_bytesnumber
The saved file's size in bytes, or 0 when not saved.
file_urltext
A URL that serves the saved file, or '' when not saved.
formattext
What the picture is: png, gif for an animated chart, or svg for a QR code or diagram drawn as SVG.
heightnumber
The height in pixels the chart is shown at.
image_tagtext
The same link as an HTML <img> tag, with alt text and the chart's width and height, for a step that writes an email or a page.
saved_as_filetrue/false
True when the chart was also saved as a file (Also save the chart as a file). The file fields below are empty otherwise.
urltext
A permanent link to the chart's picture, signed when the connection has an Image-Charts account. It shows the chart anywhere a picture can go: an email, a chat message, a document or a web page.
watermarkedtrue/false
True when Image-Charts drew its small watermark in the top right corner: every chart but a QR code, unless the connection has an Image-Charts account.
widthnumber
The width in pixels the chart is shown at, as asked for. A diagram is shown at its own size. Chart.js charts and QR codes are drawn with more pixels than this, so they stay sharp.
Example output
{
  "content_type": "",
  "document_ref": "",
  "documents": [],
  "file_size_bytes": 0,
  "file_url": "",
  "format": "png",
  "height": 30,
  "image_tag": "<img src=\"https://image-charts.com/chart?cht=bhs&amp;chs=400x30&amp;chd=a%3A65%7C35&amp;chco=4E79A7%2CE3E3E3&amp;chma=-10%2C0%2C0%2C-10&amp;chxt=x%2Cy&amp;chxs=0%2CFFFFFF00%2C0%2C0%2C_%7C1%2CFFFFFF00%2C0%2C0%2C_&amp;chl=65%25%7C&amp;chof=.png\" alt=\"Progress bar at 65%\" width=\"400\" height=\"30\">",
  "saved_as_file": false,
  "url": "https://image-charts.com/chart?cht=bhs&chs=400x30&chd=a%3A65%7C35&chco=4E79A7%2CE3E3E3&chma=-10%2C0%2C0%2C-10&chxt=x%2Cy&chxs=0%2CFFFFFF00%2C0%2C0%2C_%7C1%2CFFFFFF00%2C0%2C0%2C_&chl=65%25%7C&chof=.png",
  "watermarked": true,
  "width": 400
}

Create a QR code

Make a QR code for a link or any other text, up to 4,296 characters, as a PNG or an SVG, in your colours and with the error correction you choose. QR codes never carry the watermark. Returns a link to the picture, an HTML image tag, and the picture as a file if asked.

Inputs

TexttexttextRequired
What the code holds: a link, such as https://www.lodol.ai, or any text, up to 4,296 characters. Longer text needs a bigger code, and very long text may not fit; the step then says so.
Sizesizenumber
The code's width and height in pixels, from 1 to 999. Defaults to 300.From 1 to 999. Default: 300.
Error correctionerror_correctiontext
How much of the code can be damaged or covered and still scan. Medium by default; higher levels hold less text.One of: L (Low: survives 7% damage, holds the most), M (Medium: survives 15% damage), Q (Quartile: survives 25% damage), H (High: survives 30% damage, for print or a logo on top). Default: M.
Marginmarginnumber
The blank border round the code, counted in the code's own squares, from 0 to 20. Defaults to 4, what scanners expect.From 0 to 20. Default: 4.
Colorcolortext
The code's colour, as a hex code such as #000000 or a name such as navy. Black if left empty; keep it dark on a light background so it scans.
Background colorbackground_colortext
The colour behind the code, as a hex code, a name, or transparent. White if left empty.
Formatformattext
A PNG picture (the default) or an SVG drawing, which stays sharp at any size, for print.One of: png (PNG picture), svg (SVG drawing, sharp at any size). Default: png.
Also save the chart as a filesave_as_filetrue/false
Off by default, because the link is all an email, a chat message or a document needs. Turn it on when a later step needs the file itself: attaching it to an email, uploading it to storage, or posting it as a file.Default: false.

Outputs

content_typetext
The saved file's type, e.g. image/png, or '' when not saved.
document_reftext
The saved file's document reference, or '' when not saved.
documentslist
The saved chart as a document, ready to attach to a later step. Empty when it was not saved.
file_size_bytesnumber
The saved file's size in bytes, or 0 when not saved.
file_urltext
A URL that serves the saved file, or '' when not saved.
formattext
What the picture is: png, gif for an animated chart, or svg for a QR code or diagram drawn as SVG.
heightnumber
The height in pixels the chart is shown at.
image_tagtext
The same link as an HTML <img> tag, with alt text and the chart's width and height, for a step that writes an email or a page.
saved_as_filetrue/false
True when the chart was also saved as a file (Also save the chart as a file). The file fields below are empty otherwise.
urltext
A permanent link to the chart's picture, signed when the connection has an Image-Charts account. It shows the chart anywhere a picture can go: an email, a chat message, a document or a web page.
watermarkedtrue/false
True when Image-Charts drew its small watermark in the top right corner: every chart but a QR code, unless the connection has an Image-Charts account.
widthnumber
The width in pixels the chart is shown at, as asked for. A diagram is shown at its own size. Chart.js charts and QR codes are drawn with more pixels than this, so they stay sharp.
Example output
{
  "content_type": "",
  "document_ref": "",
  "documents": [],
  "file_size_bytes": 0,
  "file_url": "",
  "format": "png",
  "height": 300,
  "image_tag": "<img src=\"https://image-charts.com/chart?cht=qr&amp;chs=300x300&amp;chl=https%3A%2F%2Fwww.lodol.ai&amp;choe=UTF-8&amp;chld=M%7C4&amp;chof=.png\" alt=\"QR code for https://www.lodol.ai\" width=\"300\" height=\"300\">",
  "saved_as_file": false,
  "url": "https://image-charts.com/chart?cht=qr&chs=300x300&chl=https%3A%2F%2Fwww.lodol.ai&choe=UTF-8&chld=M%7C4&chof=.png",
  "watermarked": false,
  "width": 300
}

Create a radar chart

Draw a radar (spider) chart comparing one or more series across three or more labels, one spoke each, such as skills or product scores, optionally shading inside each series. Returns a link to the picture, an HTML image tag, and the picture as a file if asked.

Inputs

LabelslabelstextRequired
The name of each spoke, in order round the chart from the top, separated by commas (or one per line). At least 3.
SeriesserieslistRequired
One or more series, each with a name for the legend and its values, one for each spoke.
Titletitletext
Text above the chart. A line break in it starts a second line. Leave empty for none.
Fillfilltrue/false
Shade the area inside each series. Off by default.Default: false.
Colorscolorstext
One colour for each series, in order, as hex codes such as #4E79A7 or names such as navy, separated by commas. Series without one take the next colour of a ten-colour palette.
Legend positionlegend_positiontext
Where the legend of series names goes: bottom (the default), right, top or left, or no legend. There is only a legend when a series has a name.One of: bottom, right, top, left, none (No legend). Default: bottom.
Widthwidthnumber
The chart's width in pixels, from 1 to 999. Defaults to 400.From 1 to 999. Default: 400.
Heightheightnumber
The chart's height in pixels, from 1 to 999. Defaults to 400.From 1 to 999. Default: 400.
Background colorbackground_colortext
The colour behind the chart, as a hex code such as #FFFFFF, a name such as white, or transparent. White if left empty.
Animatedanimatedtrue/false
Draw the chart growing into place as an animated GIF, for an email or a chat message. Off by default. A GIF is several times the size of the still picture.Default: false.
Also save the chart as a filesave_as_filetrue/false
Off by default, because the link is all an email, a chat message or a document needs. Turn it on when a later step needs the file itself: attaching it to an email, uploading it to storage, or posting it as a file.Default: false.

Outputs

content_typetext
The saved file's type, e.g. image/png, or '' when not saved.
document_reftext
The saved file's document reference, or '' when not saved.
documentslist
The saved chart as a document, ready to attach to a later step. Empty when it was not saved.
file_size_bytesnumber
The saved file's size in bytes, or 0 when not saved.
file_urltext
A URL that serves the saved file, or '' when not saved.
formattext
What the picture is: png, gif for an animated chart, or svg for a QR code or diagram drawn as SVG.
heightnumber
The height in pixels the chart is shown at.
image_tagtext
The same link as an HTML <img> tag, with alt text and the chart's width and height, for a step that writes an email or a page.
saved_as_filetrue/false
True when the chart was also saved as a file (Also save the chart as a file). The file fields below are empty otherwise.
urltext
A permanent link to the chart's picture, signed when the connection has an Image-Charts account. It shows the chart anywhere a picture can go: an email, a chat message, a document or a web page.
watermarkedtrue/false
True when Image-Charts drew its small watermark in the top right corner: every chart but a QR code, unless the connection has an Image-Charts account.
widthnumber
The width in pixels the chart is shown at, as asked for. A diagram is shown at its own size. Chart.js charts and QR codes are drawn with more pixels than this, so they stay sharp.
Example output
{
  "content_type": "",
  "document_ref": "",
  "documents": [],
  "file_size_bytes": 0,
  "file_url": "",
  "format": "png",
  "height": 400,
  "image_tag": "<img src=\"https://image-charts.com/chart?cht=r&amp;chs=400x400&amp;chd=a%3A81%2C65%2C50%2C67%2C59%7C77%2C67%2C10%2C79%2C65&amp;chco=4E79A7%2CF28E2B&amp;chl=Speed%7CPower%7CRange%7CArmor%7CLuck&amp;chm=B%2C4E79A740%2C0%2C0%2C0%7CB%2CF28E2B40%2C1%2C0%2C0&amp;chdl=Model%20A%7CModel%20B&amp;chdlp=b&amp;chof=.png\" alt=\"Radar chart\" width=\"400\" height=\"400\">",
  "saved_as_file": false,
  "url": "https://image-charts.com/chart?cht=r&chs=400x400&chd=a%3A81%2C65%2C50%2C67%2C59%7C77%2C67%2C10%2C79%2C65&chco=4E79A7%2CF28E2B&chl=Speed%7CPower%7CRange%7CArmor%7CLuck&chm=B%2C4E79A740%2C0%2C0%2C0%7CB%2CF28E2B40%2C1%2C0%2C0&chdl=Model%20A%7CModel%20B&chdlp=b&chof=.png",
  "watermarked": true,
  "width": 400
}

Create a scatter chart

Draw a scatter chart of points given by their x and y values, in one or more series, or a bubble chart when each point also has a size. Returns a link to the picture, an HTML image tag, and the picture as a file if asked.

Inputs

SeriesserieslistRequired
One or more series of points, each with a name for the legend, its x values and its y values (the same number of each, separated by commas), and optionally a size for each point, its radius in pixels, for a bubble chart.
Titletitletext
Text above the chart. A line break in it starts a second line. Leave empty for none.
Point sizepoint_sizenumber
The radius of every point in pixels, from 1 to 100, for series without sizes of their own. Defaults to 5.From 1 to 100. Default: 5.
Colorscolorstext
One colour for each series, in order, as hex codes such as #4E79A7 or names such as navy, separated by commas. Series without one take the next colour of a ten-colour palette.
Legend positionlegend_positiontext
Where the legend of series names goes: bottom (the default), right, top or left, or no legend. There is only a legend when a series has a name.One of: bottom, right, top, left, none (No legend). Default: bottom.
Widthwidthnumber
The chart's width in pixels, from 1 to 999. Defaults to 600.From 1 to 999. Default: 600.
Heightheightnumber
The chart's height in pixels, from 1 to 999. Defaults to 400.From 1 to 999. Default: 400.
Background colorbackground_colortext
The colour behind the chart, as a hex code such as #FFFFFF, a name such as white, or transparent. White if left empty.
Animatedanimatedtrue/false
Draw the chart growing into place as an animated GIF, for an email or a chat message. Off by default. A GIF is several times the size of the still picture.Default: false.
Also save the chart as a filesave_as_filetrue/false
Off by default, because the link is all an email, a chat message or a document needs. Turn it on when a later step needs the file itself: attaching it to an email, uploading it to storage, or posting it as a file.Default: false.

Outputs

content_typetext
The saved file's type, e.g. image/png, or '' when not saved.
document_reftext
The saved file's document reference, or '' when not saved.
documentslist
The saved chart as a document, ready to attach to a later step. Empty when it was not saved.
file_size_bytesnumber
The saved file's size in bytes, or 0 when not saved.
file_urltext
A URL that serves the saved file, or '' when not saved.
formattext
What the picture is: png, gif for an animated chart, or svg for a QR code or diagram drawn as SVG.
heightnumber
The height in pixels the chart is shown at.
image_tagtext
The same link as an HTML <img> tag, with alt text and the chart's width and height, for a step that writes an email or a page.
saved_as_filetrue/false
True when the chart was also saved as a file (Also save the chart as a file). The file fields below are empty otherwise.
urltext
A permanent link to the chart's picture, signed when the connection has an Image-Charts account. It shows the chart anywhere a picture can go: an email, a chat message, a document or a web page.
watermarkedtrue/false
True when Image-Charts drew its small watermark in the top right corner: every chart but a QR code, unless the connection has an Image-Charts account.
widthnumber
The width in pixels the chart is shown at, as asked for. A diagram is shown at its own size. Chart.js charts and QR codes are drawn with more pixels than this, so they stay sharp.
Example output
{
  "content_type": "",
  "document_ref": "",
  "documents": [],
  "file_size_bytes": 0,
  "file_url": "",
  "format": "png",
  "height": 400,
  "image_tag": "<img src=\"https://image-charts.com/chart?cht=bb&amp;chs=600x400&amp;chd=a%3A10%2C20%2C5%2C_%2C40%2C60%2C5%2C_%2C70%2C30%2C5%7C15%2C50%2C8%2C_%2C55%2C20%2C14&amp;chxt=x%2Cy&amp;chdl=Team%20A%7CTeam%20B&amp;chdlp=b&amp;chtt=Price%20and%20rating&amp;chf=b0%2Cs%2C4E79A7%7Cb1%2Cs%2CF28E2B&amp;chof=.png\" alt=\"Price and rating\" width=\"600\" height=\"400\">",
  "saved_as_file": false,
  "url": "https://image-charts.com/chart?cht=bb&chs=600x400&chd=a%3A10%2C20%2C5%2C_%2C40%2C60%2C5%2C_%2C70%2C30%2C5%7C15%2C50%2C8%2C_%2C55%2C20%2C14&chxt=x%2Cy&chdl=Team%20A%7CTeam%20B&chdlp=b&chtt=Price%20and%20rating&chf=b0%2Cs%2C4E79A7%7Cb1%2Cs%2CF28E2B&chof=.png",
  "watermarked": true,
  "width": 600
}

iLovePDF

Previous Page

IMF Data

Next Page

On this page

ActionsCreate a bar chartCreate a Chart.js chartCreate a custom chartCreate a GraphViz diagramCreate a line chartCreate a pie chartCreate a progress barCreate a QR codeCreate a radar chartCreate a scatter chart