st-core.fscss — A library for creating pure CSS charts without JavaScript, compatible with any tech stack

st-core.fscss is a pure-CSS statistical dashboard system built on FSCSS.

No SVG.

No canvas.

No Chart.js / D3 / Recharts.

Just clip-path: polygon(), CSS custom properties, and FSCSS arrays.

What’s new in v2

• Dynamic datasets — any length (not locked to 8 points)
• Automatic even X-spacing from array length
• Native 0–100 value normalization
• Spider / radar charts (polar coordinates, multi-series, spokes, axis labels)
• Dual-pass line strokes + fill
• Stat cards, grids, dots, category bars, phone frames
• Design tokens for easy theming

30-second example (HTML + runtime)

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.6/runtime.min.js" async></script>
<style>
  @import((*) from st-core@v2)
  @st-root()

  @arr myData[56, 67, 70, 43, 67, 80]

  @st-chart-fill(.chart-fill, myData)
  @st-chart-line(.chart-line, myData)

  .chart {
    @st-chart-points(myData)
    position: relative;
    height: 220px;
  }
</style>

<div class="chart">
  <div class="chart-fill"></div>
  <div class="chart-line"></div>
</div>

Live data? Just update the --st-pN (or polar --st-sxN / --st-syN) variables. CSS does the rest.

Production workflow

1. Write the FSCSS
2. Compile once: npx fscss chart.fscss chart.css
3. Import the CSS
4. Bind data via CSS variables (Svelte, React, Vue, plain JS — all work the same)

Try it

• GitHub: github.com/fscss-ttr/st-core.fscss (MIT)

• Full docs + spider chart reference + Svelte/React/HTML integrations in the repo

If you’re building dashboards, admin panels, or any UI where every kilobyte of JS matters, this is for you.

Feedback, PRs, and weird chart ideas welcome.