API Reference

All charts start by creating an image tag with the same base URL:

<img src="get.charttt.com/v1/chart" />


Following there’s the chart type prefixed with /t_.

You can use one of the 9 supported chart type:

  • Bar chart - /t_bar/
  • Horizontal bar chart - /t_horizontalBar/
  • Line chart - /t_line/
  • Pie chart - /t_pie/
  • Doughnut chart - /t_doughnut/
  • Scatter chart - /t_scatter/
  • Radar chart - /t_radar/
  • Bubble chart - /t_bubble/
  • Polar chart - /t_polar/

Next you start adding options to the path. You can do that in any order you like.

Sparklines

Sparkline charts are small charts without any visible axis that are great for embedding inline to show some trend, where the actual numbers are not that important.

Here’s one 👉

You can turn line and bar charts into sparklines by adding /spark/ into the path.

Data

Data series is prefixed with /d_ followed by comma delimeted series of numbers

/d_5,12,34.5


In scatter graphs, the list should contain pairs of numbers that represent x,y of each point on the graph. The example represent 3 circles on the graph with p1=1,5 p2=3,2 and p3=2,3

/d_1,5,3,2,2,3


In bubble graphs, the list should contain tuples of 3 numbers that represent x,y,radius of each circle on the graph. The example represent 2 points on the graph with p1=(1,5), r=10 p2=(3,2), r=8

/d_1,5,10,3,2,8


To specify the data series’ label that appears in the legend, add path param prefixed with /dl_ after the data series

/d_5,12,34.5/dl_North


All non-alpha numeric or non English characters has to be URI encoded. You can use javascript method encodeURI(str) to achieve that

/d_5,12,34.5/dl_North%23East

You can add multiple data series just by repeating the data and data label sections

/d_5,12,34.5/dl_North/d_6,17,28/dl_South

Dimensions

You can control the width and height of the chart by setting /w_ and /h_ sections with the number of pixels requested.

The default width and height are both 400 pixels.

/w_800/h_600

Legend

Legend options are prefixed with /lg_ followed by comma delimited list of options

The position of the legend relative to the chart is set by one of the options top, left, bottom, right

/lg_right


The alignment is set by one of the options start, center, end.

/lg_right,start


You can turn the legend to Right-to-left by setting rtl.

/lg_right,start,rtl


And last, you can completely hide the legend by setting hide.

/lg_hide

Title

Title position

Title position can be controled with the param /tt_.

The position of the title relative to the chart is set by one of the options top, left, bottom, right.

When set on either left or right, the title will be rotated by 90 degrees.

/tt_right

Title font size

You can control the font size of the title with the param /ts_.

The value is the font size in pixels without px suffix


/ts_20

Title color

You can control the color of the title with the param /tc_

The value is RGB or RGBA in hex format, without # sign.


/tc_ff0000

/tc_00000077


To specify the title itself use query param ttl

?ttl=Sales

File types

You can choose the file type by setting a file name and extension at the end pf the path, before any query params (before the ?).

Supported file types are .png (defult) and .jpg

/my-chart.jpg


In addition, you can use .data in order to get back a data-url string that can be inlined into your html.

A data-url string starts with the sequence data:image/png;base64,.... and it can be placed into the src attribute of an image tag: <img src="...">

Troubleshooting

If you want to make sure that the URL has no errors, add a file name with json extension at the end of the path, before any query params (before the ?).

You will get back a json file with an array of all errors in the path.

If you have no errors you will get an empty array like this: {"errors": []}

/my-chart.json

Style

Padding

Padding is controlled with the param /p_

A single value will set padding in all 4 sides equally

/p_30

2 comma delimited values will set padding for the top/bottom, and for left/right of the chart, in that order

/p_50,30

3 or 4 comma delimited values will set padding for the top,right,bottom,left of the chart, in that order

/p_50,30,20,10

Background color

Default background color is white. You can change that with the param /bg_

The value is RGB or RGBA in hex format, without # sign

/bg_f2f3f4

/bg_f2f3f477

Color scheme

You can control the color scheme of the chart’s data using the param /cs_


The value is one of the named color schemes below


Note that the number at the end of the name denotes the number of colors in that scheme.

If your dataset is larger than the number of colors, the same colors will be reused multiple times.


/cs_brewer.SetOne3


See list of color schemas here