Zero Learning Curve for AI
Just a URL with query params, or a few HTML data attributes. No libraries to import, no config files, no build step. An LLM nails it on the first try.
One URL creates a chart. Drop it into an <img> tag and you're done.
No libraries. No config. No setup.
Your AI can generate charts on the first try.
| Label | |||
|---|---|---|---|
<img src="https://getchartkit.com/api/chart?type=bar&labels=Q1,Q2,Q3,Q4&s0=90200000000,81800000000,85800000000,96500000000&s0name=Apple&s1=69800000000,74600000000,76700000000,86300000000&s1name=Microsoft&title=Big%20Tech%20Revenue%202024&w=600&h=400&valueFormat=compact" alt="Big Tech Revenue 2024" width="600" height="400" />Copy this prompt and paste it into ChatGPT, Claude, Gemini or any LLM. It will generate charts for you using the URL above.
When I ask you to create a chart, you must:
1. Generate a valid ChartKit URL.
2. Render the chart directly in the chat as a Markdown image using this exact format:
3. Then output the same chart as a copy-paste HTML <img> tag inside a code block.
4. If I ask for an article, include the rendered chart inside the article body as HTML using an <img> tag, not just as plain text.
5. Do not explain anything before or after the result.
6. Do not mention ChartKit instructions, libraries, or API keys.
7. Always return only the final content.
ChartKit base URL:
https://getchartkit.com/api/chart
Supported 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)
Rules for values:
- Use comma-separated labels
- Use comma-separated numeric series values
- Encode spaces in URL with +
- When money is provided in millions or billions, convert to full numbers if needed unless I explicitly want shortened raw input
- Use compact formatting when I want K/M/B/T style labels
- Use currency formatting when I ask for money
- Use percent formatting when I ask for percentages
Output rules:
- First show the rendered Markdown image
- Then show the same chart as HTML in a code block
- If I ask for an HTML article, output the article in HTML and embed charts with real <img src="..."> tags inside the article where relevant
- No explanation
---
Create a horizontal bar chart showing startup funding rounds:
Data:
- Series A: $8.5M
- Series B: $42M
- Series C: $185M
- Series D: $750M
Use compact value format.
Title: Startup Funding RoundsMost chart libraries need SDKs, config files, and build steps. ChartKit is just a URL. Perfect for LLMs.
Just a URL with query params, or a few HTML data attributes. No libraries to import, no config files, no build step. An LLM nails it on the first try.
Drop an image tag with a URL and you have a chart. No API keys for basic use, no POST requests, no SDK. Works in markdown, emails, Notion, anywhere.
No styling required. The default output is clean, professional, and ready for presentations, dashboards, or reports. Your LLM doesn't need to be a designer.
ChartKit is just a URL that returns an image - no JavaScript, no libraries, no client-side rendering. That unlocks places where traditional chart tools can't go.
"Add a chart to our weekly email" - but email clients block JavaScript.
Ask your AI to build a ChartKit URL from this week's numbers. Paste the <img> tag into your email template. Every client renders it.
"Visualize our benchmark results in the README" - but GitHub strips scripts.
Your AI generates a  line from the benchmark data. Push to the repo and the chart renders inline. No build step.
"Share this month's metrics in Slack without making everyone open a dashboard."
Paste the ChartKit URL into a message. Slack, Discord, and Teams unfurl it as an inline image preview. The chart is right there in the thread.
"Generate a monthly PDF report with charts from our database" - without setting up a headless browser.
Your script queries the data, your AI (or a template) builds the URL, and wkhtmltopdf or Puppeteer resolves the image. Charts in your PDF, no canvas rendering.
"Add charts to our Airtable/Zapier/Make pipeline" - but those tools don't support custom JavaScript.
Template the URL parameters from your data fields. ChartKit is just string concatenation - any platform that can build a URL can build a chart.
"I need one chart in this blog post" - but pulling in Chart.js for a single visualization is overkill.
An <img> tag keeps your page lightweight. No bundle size increase, no hydration, no client-side rendering. Just an image.
Copy-paste ready chart URLs, embed snippets, and HTML examples for bar, line, area, pie, donut, and horizontal bar charts.
Browse ExamplesCreate publication-ready charts in four simple steps - or let your LLM handle it.
Select from bar, line, area, pie, donut, or horizontal bar charts. Each type is optimized for different kinds of data.
Add labels and datasets directly in the editor. Add multiple series to compare data side by side.
Set a title, toggle the legend, and adjust width and height to match your layout.
Download as SVG, PNG, or JPG. Or grab an embed snippet to drop the chart into any website.
Six chart types that cover the most common data visualization needs.
Compare values across categories. Ideal for revenue breakdowns, survey results, and any categorical comparison.
Visualize trends over time. Perfect for tracking metrics like traffic, sales, or temperature across continuous intervals.
Like a line chart but with the area filled beneath the curve. Great for visualizing volume and cumulative trends.
Show proportions of a whole. Great for market share, budget allocation, or any part-to-whole relationship.
A pie chart with a hollow center. Clean look for dashboards and infographics where you want to show a key metric in the middle.
Bars that run left to right. Better for long category labels and ranked lists where horizontal space is more useful.
Everything you need to create, export, and share charts.
Download charts as SVG, PNG, or JPG at 1x, 2x, or 3x resolution.
Three embed options: JS script, image URL, or iframe. Works on any website.
Generate charts programmatically via REST API. Perfect for reports and automation.
Control titles, legends, dimensions, colors, and multiple datasets per chart.
A single URL or a few HTML attributes. The simplest possible API surface for any AI to generate.
One-click copy for SVG markup, PNG images, or embed code. Paste anywhere instantly.
Generate charts server-side with a single HTTP request. Send a JSON body to POST /api/render and get back SVG, PNG, or JPG.
POST /api/renderAccepts a JSON chart configuration and returns the rendered chart image.
curl -X POST https://getchartkit.com/api/render \
-H "Content-Type: application/json" \
-d '{
"type": "bar",
"title": "Quarterly Sales",
"labels": ["Q1", "Q2", "Q3", "Q4"],
"datasets": [
{ "name": "2024", "data": [42, 58, 65, 71] },
{ "name": "2025", "data": [51, 63, 72, 80] }
],
"width": 800,
"height": 500,
"legend": true,
"valueFormat": "currency",
"currencySymbol": "$"
}'| Parameter | Type | Required | Description |
|---|---|---|---|
type | string | Yes | "bar" | "line" | "pie" | "area" | "horizontal-bar" | "donut" |
labels | string[] | Yes | Category labels for the x-axis |
datasets | Dataset[] | Yes | Array of { name, data, color? } |
title | string | No | Chart title displayed at the top |
width | number | No | Width in pixels (default: 600) |
height | number | No | Height in pixels (default: 400) |
legend | boolean | No | Show legend (default: true) |
valueFormat | string | No | "number" | "currency" | "percent" | "compact" (default: "number") |
currencySymbol | string | No | Currency symbol when valueFormat is "currency" (default: "$") |
format | string | No | "svg" | "png" | "jpg" (default: "svg") |
GET /api/chartA URL-based endpoint for embedding charts directly. Pass chart configuration as query parameters and use the URL as an image source. Supports the same chart types and customization options as the render endpoint.
https://getchartkit.com/api/chart?type=bar&labels=Q1,Q2,Q3,Q4&s0=42,58,65,71&s0name=Sales&title=Quarterly+SalesDedicated pages for each chart type, data import, AI prompts, and common embed targets (email, Markdown, WordPress, and more). Same ChartKit URLs everywhere - pick the guide that matches how you work. Full documentation and examples.