DEV Community

Cover image for Build Pure CSS Charts from Your Backend with the ProvChart API
FSCSS
FSCSS

Posted on Originally published at chart.devtem.org

Build Pure CSS Charts from Your Backend with the ProvChart API

#javascript #css #api #provchart

No chart libraries. No runtime. Just HTML + CSS.

If you’ve ever wanted charts that:

  • Load with the first paint
  • Are fully crawlable by search engines
  • Don’t ship a heavy JavaScript charting library
  • Can still be generated dynamically from your own data

…then you might like what ProvChart does.

ProvChart is a pure-CSS chart engine. Instead of rendering with Canvas or SVG + JavaScript, it compiles your data into CSS custom properties. The browser then paints the chart using clip-path and native CSS.

Today I’m sharing how to use the ProvChart Developer API so you can generate these charts from your own backend or frontend.

What You Get

You send JSON → you receive:

{
  "success": true,
  "html": "<div class=\"pc-...\">...</div>",
  "css": ".pc-... { ... }"
}
Enter fullscreen mode Exit fullscreen mode

Drop the HTML and CSS into any page and the chart appears. No client-side chart library required.

Quick Example (Frontend)

Here’s a complete working example:

<div id="chart-container"></div>

<script type="module">
  try {
    const res = await fetch("https://provchart-api.devtem.org/api/v1/generate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-API-Key": "YOUR_API_KEY"
      },
      body: JSON.stringify({
        type: "line",
        series: [
          { name: "Revenue", color: "#8b7bff", points: [20, 35, 48, 66] },
          { name: "Users", color: "#4fd8c4", points: [12, 28, 41, 55] }
        ],
        axisX: ["Jan", "Feb", "Mar", "Apr"]
      })
    });

    const data = await res.json();

    if (data.success) {
      // Inject the chart HTML
      document.getElementById("chart-container").innerHTML = data.html;

      // Inject the CSS
      document.querySelector("head").insertAdjacentHTML(
        "beforeend",
        `<style>${data.css}</style>`
      );
    } else {
      console.error("API Error:", data.error);
    }
  } catch (err) {
    console.error("Fetch Error:", err);
  }
</script>
Enter fullscreen mode Exit fullscreen mode

That’s it. The chart is now on the page as pure HTML + CSS.

Supported Chart Types

Type Description Plan
line Multi-series line chart Free/Pro
area Filled area chart Pro
bar Vertical bars (optionally stacked) Free/Pro
stackedbar Stacked vertical bars Pro
hbar Horizontal bars Pro
scatter Scatter plot with radius Pro
combo Mixed bar + line Pro
gauge Circular KPI gauge Free/Pro

Authentication

You need an API key.

  1. Go to chart.devtem.org/dashboard
  2. Open the Developer API tab
  3. Click Create key
  4. Copy the key (it is shown only once)

Send it in the header:

X-API-Key: pc_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Enter fullscreen mode Exit fullscreen mode

or

Authorization: Bearer pc_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Enter fullscreen mode Exit fullscreen mode

Request Format 

{
  "type": "line",
  "series": [
    {
      "name": "Revenue",
      "color": "#8b7bff",
      "points": [20, 35, 48, 66]
    }
  ],
  "axisX": ["Jan", "Feb", "Mar", "Apr"],
  "theme": "dark"          // optional: "dark" | "light" | "midnight"
}
Enter fullscreen mode Exit fullscreen mode

Series object options 

{
  "name": "Series name",
  "color": "#8b7bff",
  "points": [10, 20, 30],
  "type": "line",          // only for combo charts
  "stack": true,           // for stacked bars
  "radius": 6              // for scatter
}
Enter fullscreen mode Exit fullscreen mode

Node.js Example 

const res = await fetch("https://provchart-api.devtem.org/api/v1/generate", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-API-Key": process.env.PROVCHART_API_KEY
  },
  body: JSON.stringify({
    type: "area",
    series: [
      { name: "Signups", color: "#4fd8c4", points: [12, 28, 35, 42, 58] }
    ],
    axisX: ["Mon", "Tue", "Wed", "Thu", "Fri"]
  })
});

const data = await res.json();

if (data.success) {
  // You can now store data.html + data.css
  // or inject them into a template
  console.log(data.html);
  console.log(data.css);
}
Enter fullscreen mode Exit fullscreen mode

Checking Usage 

curl https://provchart-api.devtem.org/api/v1/usage \
  -H "X-API-Key: YOUR_API_KEY"
Enter fullscreen mode Exit fullscreen mode

Response:

{
  "plan": "pro",
  "used": 142,
  "limit": 500,
  "remaining": 358,
  "month": "2026-08"
}
Enter fullscreen mode Exit fullscreen mode

Plans & Limits

Plan Monthly Generations Max Series
Free 0 —
Pro 500 12
Business 5,000 50
Enterprise Custom Custom

Why This Approach?

Most chart libraries work like this:

  1. Ship a large JS library
  2. Wait for JS to execute
  3. Create DOM / Canvas / SVG
  4. Re-render on every data change

ProvChart works like this:

  1. Compile data → CSS variables
  2. Browser paints with clip-path
  3. Update = change CSS variables (native interpolation)

This gives you:

  • Zero chart library weight on the page
  • First-paint charts
  • Perfect SEO / crawlability
  • Very simple updates

Error Handling

The API returns clear error messages:

{
  "success": false,
  "error": "Monthly limit reached (500 generations). Upgrade your plan or wait until next month.",
  "code": "MONTHLY_LIMIT_REACHED",
  "used": 500,
  "limit": 500
}
Enter fullscreen mode Exit fullscreen mode

Common codes:

  • INVALID_API_KEY
  • PLAN_REQUIRED
  • MONTHLY_LIMIT_REACHED

Try It

The core rendering engine is open source (st-core.fscss). The hosted API + Pro features are provided for special use.

Would love to hear what you build with it.

Happy charting!

Top comments (0)