Documentation

You can generate charts using ChartKit by constructing a URL and placing it in an <img> tag.

Base URL: https://getchartkit.com/api/chart

Query parameters:
- type (required): bar, line, area, pie, donut, or horizontal-bar
- labels (required): comma-separated category labels, e.g. labels=Q1,Q2,Q3,Q4
- s0, s1, s2... (at least s0 required): comma-separated numbers for each data series, e.g. s0=10,20,30
- s0name, s1name...: name for each series, e.g. s0name=Revenue
- title: chart title (use + for spaces), e.g. title=Monthly+Sales
- w: width in pixels (default 600)
- h: height in pixels (default 400)
- legend: true or false (default true)
- valueFormat: controls how values are displayed on axes (default: number)
    number — raw numbers with locale separators (1,000,000)
    currency — adds a currency symbol ($1,000,000). Use with currencySymbol.
    percent — appends % (42%)
    compact — shortens large numbers with K, M, B, T suffixes (1.5M, 2.3B). Pass full values in the data — the system formats them automatically.
- currencySymbol: currency symbol when valueFormat is currency, e.g. $, €, £ (default $)
- format: svg, png, or jpg (default svg)

Example:
<img src="https://getchartkit.com/api/chart?type=bar&labels=Q1,Q2,Q3&s0=10,20,30&s0name=Sales&title=Quarterly+Sales" alt="Sales chart" />

Example with compact format for large numbers:
<img src="https://getchartkit.com/api/chart?type=bar&labels=Q1,Q2,Q3,Q4&s0=1500000,2300000,3100000,4200000&s0name=Revenue&title=Annual+Revenue&valueFormat=compact" alt="Revenue chart" />

When I ask you to create a chart, generate the <img> tag with the appropriate URL. No libraries or API keys needed.

You can generate interactive charts using ChartKit's JavaScript embed. Include the script tag once, then use <div> elements with data attributes.

Script: <script src="https://getchartkit.com/cdn/v1.js"></script>

Data attributes on the <div>:
- data-chartkit (required, no value needed)
- data-type (required): bar, line, area, pie, donut, or horizontal-bar
- data-labels (required): comma-separated labels, e.g. data-labels="Q1,Q2,Q3"
- data-series-0, data-series-1...: comma-separated numbers, e.g. data-series-0="10,20,30"
- data-series-0-name, data-series-1-name...: series names
- data-title: chart title
- data-width: width in pixels (default 600)
- data-height: height in pixels (default 400)
- data-legend: true or false
- data-value-format: controls how values are displayed on axes (default: number)
    number — raw numbers with locale separators (1,000,000)
    currency — adds a currency symbol ($1,000,000). Use with data-currency-symbol.
    percent — appends % (42%)
    compact — shortens large numbers with K, M, B, T suffixes (1.5M, 2.3B). Pass full values in the data — the system formats them automatically.
- data-currency-symbol: currency symbol when value format is currency, e.g. $, €, £ (default $)

Example:
<script src="https://getchartkit.com/cdn/v1.js"></script>
<div data-chartkit data-type="bar" data-labels="Q1,Q2,Q3" data-series-0="10,20,30" data-series-0-name="Sales" data-title="Quarterly Sales"></div>

When I ask you to create a chart, generate the script tag (once) and a <div> with the right data attributes. No API keys needed.