Charts for blog posts
Static blogs love remote images: build the chart once, hotlink the URL, let readers’ browsers cache it. No bundling chart libraries into your theme.
Fit with static site generators
Hugo, Eleventy, Astro, Jekyll - all handle `!alt` or shortcodes that wrap `<img>`. ChartKit supplies the `url`.
MDX posts can still use plain images unless you need interactive widgets; start simple.
See also charts for Markdown for readme-centric workflows.
Use cases
- Engineering blogs publishing benchmark posts with a handful of plots.
- Founder letters where numbers update monthly - swap the query string when data changes.
- Cross-posting the same article to dev.to and your own domain with identical image URLs.
Examples
SVG (sharp on retina)
https://getchartkit.com/api/chart?type=bar&labels=Build,Test,Ship&s0=18,12,27&s0name=Hours&title=Sprint+focus&format=svg&w=720&h=400Markdown
Line chart for release metrics
https://getchartkit.com/api/chart?type=line&labels=R1,R2,R3,R4,R5&s0=14,12,15,18,17&s0name=Bugs&title=Bugs+per+release&format=svgPNG when your CDN recompresses aggressively
https://getchartkit.com/api/chart?type=area&labels=Jan,Feb,Mar,Apr&s0=40,44,42,48&s0name=Latency&format=png&w=680&h=380Draft your blog figure
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
Copy
Show snippets
How it works
- Author in your static generator’s Markdown, drop image syntax where figures go.
- Optional: wrap with `<figure>` and `<figcaption>` in HTML for accessibility.
- Set explicit width/height attributes to reduce layout shift.
Use with ChatGPT or Claude
LLM-drafted posts should embed ChartKit URLs you verify in preview.
AI publishing pipelines: charts for AI-generated content.
FAQ
- Do I need chart.js on my blog?
No if you use image embeds.
- SVG or PNG?
SVG for crisp diagrams; PNG if your pipeline rasterizes anyway.
- WordPress?
- Free?
Yes for typical public chart URL usage.
- Canonical URL changes?
Update the image URL in git when numbers change so caches bust intentionally.