FSCSS tutorial for FSCSS tutorial

Posted on Oct 6 Originally published at hub.devtem.org

Free visual builder for pure CSS charts — st-core.fscss

#opensource #css #fscss #uidesign

You can design a line or area chart, toggle grid and dots, pick an accent, and leave with FSCSS, HTML, and CSS—without wiring Chart.js or an SVG library.

st-core Visual Chart Builder is free and open-source. It sits on st-core@v2: charts as CSS custom properties and clip-path polygons, driven by FSCSS arrays.

Module: github.com/fscss-ttr/st-core.fscss

Why this matters

Most “chart builders” emit React, canvas, or heavy chart SDKs. This one is aimed at lightweight, pre-designed, modern charts that ship as CSS:

No SVG / canvas requirement for the core series
Any length dataset (@arr), not a fixed 8 points
X spacing from array.length
Y as normalized --st-p1 … --st-pN (100 − value)
Optional JS only when you want to live-update those variables

The builder is a front door: tune data and layers, preview, copy code.

What the builder gives you

Control	Effect
Data list	Comma / space separated values 0–100
Presets	Rising, Decline, Volatile, Flat, Climb, Peaks
Layers	Fill, line, grid, dots
Height / radius	Chart box
Accent	`--st-accent`
Grid rows / cols	Background grid density
Array & class names	Generated selectors

Outputs

FSCSS — @import st-core@v2, @arr, @st-chart-*
HTML — full minimal page with runtime script
CSS — approximate or runtime-expanded rules

Preview uses the FSCSS ESM API with stable version, with a polygon fallback so the chart still paints if compile fails.

The chart model (what you’re designing)

Minimal mental model:

@import((*) from st-core@v2)
@st-root()

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

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

.chart {
  @st-chart-points(myData)
  position: relative;
  height: 220px;
  width: 100%;
  max-width: 520px;
  background: var(--st-surface);
  border-radius: 12px;
  overflow: hidden;
}

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

@st-chart-fill / @st-chart-line — renderer for a selector (how many points the polygon expects).
@st-chart-points — writes --st-pN on the element (the actual Y values).
Children can inherit points from a parent, or set their own for multi-series.

Runtime / CDN:

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.5/runtime.min.js" defer></script>

Live updates (optional JS)

Same variables the builder sets on the preview:

function updatePoints(el, values) {
  el.style.cssText = values
    .map((v, i) => `--st-p${i + 1}: ${100 - v}%;`)
    .join(" ");
}

updatePoints(document.querySelector(".chart"), [40, 60, 20, 80, 50]);

Pair with transition on clip-path for soft redraws—exactly what the generated snippets include.

Who it’s for

Dashboards that should stay CSS-first and cacheable
Design / content people who want a chart without a JS chart stack
dev who need a correct @arr + mixin skeleton before pasting into a larger layout (phone shell, stat cards, multi-series)

v2 is the path for new work: dynamic length, even X spacing, dual-edge line polygons. Details live in the module README and EXPLAINED.md.

Try

Open Visual Chart Builder
Enter points or click a preset
Toggle fill / line / grid / dots
Copy CSS, FSCSS or HTML
Ship with CLI compile when you want:

npm install -g fscss@latest
fscss chart.fscss chart.css

DEV Community