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 reference if you are editing links by hand.
Chart options
Formats numbers and ISO dates (2026-01-06). Other labels stay as written.
Advanced▾
Makes X and Y axis labels larger. Applies to bar, line, area, stock, and horizontal bar charts.
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.