ChartKitBETA

Charts for Markdown

Markdown’s image syntax is minimal on purpose: you point at a URL. ChartKit turns structured numbers into that URL’s PNG or SVG bytes.

READMEs and docs sites

GitHub renders `!label` if the host allows the image domain (user content policies apply).

Docs tools (MkDocs, Docusaurus) pass Markdown through to HTML the same way.

Pair with charts for blog posts when the pipeline is static-site-based.

Use cases

  • OSS projects that want a traffic chart in README without committing binary churn every week.
  • Internal handbooks written in MD and mirrored to multiple viewers.
  • Notebook exports where the MD post should stay vendor-neutral.

Examples

Basic Markdown figure

![CI duration](https://getchartkit.com/api/chart?type=line&labels=M1,M2,M3,M4,M5,M6&s0=14,12,13,11,10,9&s0name=Minutes&title=CI+p50+minutes&format=svg&w=680&h=360)

PNG when SVG is blocked

![Stars vs forks](https://getchartkit.com/api/chart?type=bar&labels=Stars,Forks,Issues&s0=1200,210,44&s0name=Count&title=Repo+signals&format=png&w=600&h=340)

Horizontal bar for long labels in narrow readme column

![Latency by region](https://getchartkit.com/api/chart?type=horizontal-bar&labels=us-east,eu-west,ap-south&s0=42,51,47&s0name=ms&title=p95+latency&format=svg&w=640&h=360)

Generate Markdown line

Adjust fields and copy URL, HTML, Markdown, or an AI prompt. See the [URL parameters](/docs/url-parameters) reference if you are editing links by hand.

Preview

Monthly Revenue

Copy

Show snippets
URL
https://getchartkit.com/api/chart?type=bar&labels=Jan,Feb,Mar,Apr,May&s0=12000,18000,15000,22000,27000&s0name=Revenue&title=Monthly%20Revenue&w=700&h=420&valueFormat=compact
HTML
<img src="https://getchartkit.com/api/chart?type=bar&labels=Jan,Feb,Mar,Apr,May&s0=12000,18000,15000,22000,27000&s0name=Revenue&title=Monthly%20Revenue&w=700&h=420&valueFormat=compact" alt="Monthly Revenue" width="700" height="420" />
Markdown
![Monthly Revenue](https://getchartkit.com/api/chart?type=bar&labels=Jan,Feb,Mar,Apr,May&s0=12000,18000,15000,22000,27000&s0name=Revenue&title=Monthly%20Revenue&w=700&h=420&valueFormat=compact)

How it works

  1. Build the chart, copy the Markdown line from the builder - no hand-escaping.
  2. Commit the Markdown; hotlink loads at render time.
  3. If policies block hotlinking, download the asset and commit the binary instead.

Use with ChatGPT or Claude

LLMs that author Markdown should output ChartKit URLs inside `![]()` only after you verify numbers.

Structured CSV pastes: CSV to chart.

FAQ

Does GitHub always show remote images?

Policies change; test preview. Alternately download and commit the PNG.

Mermaid vs ChartKit?

Mermaid renders client-side or via server; ChartKit is a plain image URL.

JavaScript?

Readers only load an image resource.

Free?

Yes for public chart URLs within limits.

HTML instead?

Use `<img>` if your Markdown engine allows raw HTML.

More ChartKit tools