ProvChart: Charts Made with --css, Not JavaScript
What if your charts didn’t need a single line of JavaScript?
No Chart.js.
No D3.
No React chart library.
No hydration delay.
Nothing for a crawler to wait on.
Just HTML + CSS.
That’s exactly what ProvChart delivers.
The Problem with Chart Libraries
Most charting solutions today ship kilobytes (sometimes hundreds of kilobytes) of JavaScript. They require:
- A runtime
- Hydration
- DOM manipulation after the page loads
- Extra work for search engines and accessibility tools
Even “lightweight” libraries still cost you performance and complexity.
ProvChart takes a different approach.
How ProvChart Works
ProvChart compiles your data into CSS custom properties.
The browser then paints the shapes using pure CSS (gradients, transforms, grid, absolute positioning, etc.).
You get:
- Zero JavaScript shipped to the client
- Instant first paint
- Perfect for static sites, SSG, and performance-critical pages
- Fully crawlable HTML
You simply:
- Enter your series data
- Choose a chart type (Bar, Stacked Bar, Horizontal Bar, Line, Gauge…)
- Optionally add X-axis labels
- Hit Generate via Pro Engine
- Copy the HTML + CSS
Done.
Supported Chart Types
- Vertical Bar
- Stacked Bar
- Horizontal Bar
- Line
- Gauge
- More coming soon
Here’s what a stacked bar looks like:
And a multi-series line chart:
Everything is pure CSS under the hood.
Why Pure CSS Charts Matter
| Benefit | Why it matters |
|---|---|
| Zero JS | No runtime cost, no hydration |
| Instant paint | Charts appear with the first paint |
| SEO-friendly | Crawlers see real HTML |
| Tiny footprint | Only the CSS you need |
| Framework-agnostic | Works with any stack |
| No dependency hell | Copy-paste and forget |
This is especially powerful for:
- Landing pages
- Documentation sites
- Marketing dashboards
- Static blogs
- Performance-sensitive apps
Try It Yourself
- Go to chart.devtem.org
- Add your data series
- Generate
- Copy the HTML + CSS
- Paste into your project
That’s it.
Useful Links
- Live App: https://chart.devtem.org
- Docs: https://chart.devtem.org/docs
- Gallery: https://chart.devtem.org/gallery
- Dashboard: https://chart.devtem.org/dashboard
- Pricing: https://chart.devtem.org/pricing
- GitHub: https://github.com/fscss-ttr
Free vs Pro
The free plan already lets you generate beautiful pure CSS charts.
The Pro Engine unlocks more advanced generation, extra series, and higher limits for production use.
Final Thoughts
We’ve been conditioned to think charts require JavaScript.
ProvChart proves they don’t.
Sometimes the best solution is the one that ships the least code.
Give it a try → chart.devtem.org
Would love to hear what you build with it.
Built with ❤️
Top comments (0)