FSCSS for FSCSS tutorial

Posted on Sep 19

Pure CSS Charts? Yes, Really. Introducing st-core.fscss v2

#webdev #css #fscss #sharepoint

If you've ever pulled in heavy libraries just to render a simple line chart, you know the drill: a few hundred KB of JavaScript, a canvas or SVG element, and a hydration step before anything even shows up on screen. For a lot of dashboards, that's massive overkill.

st-core.fscss takes a different approach. It's a CSS-only visualization system built on FSCSS that renders area charts, multi-line charts, and stat dashboards using nothing but clip-path: polygon() and CSS custom properties. No canvas. No SVG. No chart library shipping down the wire.

Here's how it works, and how to build real charts with it.

The Core Idea

Every chart in st-core is really just a polygon. Give the mixin an array of data points, and it:

Spaces the points evenly across the chart width (0% to 100%, based on array length)
Normalizes each value into a Y-position
Generates a clip-path: polygon() that traces the line (or fills the area beneath it)

@arr myData[50, 10, 97, 35, 66, 50, 80, 54, 70, 60]

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

That's the whole rendering pipeline. The array can be any length: 5 points, 50 points, doesn't matter.

Getting It Running

For Testing - Drop the runtime in your <head>:

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

Then import the module inside your <style> block:

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

Prefer a build step for production? The CLI compiles .fscss file straight to production CSS:

npm install -g fscss@latest
fscss input.fscss output.css

Vscode Extention for syntax highlights and auto-compile: FSCSS Support

A Basic Area Chart

<style>
@import((*) from st-core@v2)

@st-root()

@arr myData[20, 45, 28, 80, 65, 90, 40]

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

.chart {
  @st-chart-points(myData)
  position: relative;
  height: 200px;
  width: 100%;
  max-width: 400px;
  background: var(--st-surface);
  border-radius: 16px;
}
</style>

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

Two things worth calling out about how this splits responsibilities:

@st-chart-fill / @st-chart-line declare the renderer for a selector. The array argument just tells it how many points to expect.
@st-chart-points(myData) is what actually writes the --st-p1 through --st-p{n} values onto an element. Any child that doesn't call it inherits from the nearest ancestor that did — which is exactly what makes the multi-series case below work cleanly.

Multi-Line, Multi-Area Charts

This is where the point-inheritance model pays off. Each series gets its own renderer and its own explicit @st-chart-points call, so nothing bleeds into another series by accident:

@arr seriesA[30, 50, 75, 40, 85, 60]
@arr seriesB[10, 25, 45, 20, 55, 30]

@st-chart-fill(.fill-a, seriesA)
@st-chart-line(.line-a, seriesA)

@st-chart-fill(.fill-b, seriesB)
@st-chart-line(.line-b, seriesB)

.chart {
  @st-chart-points(seriesA)
  position: relative;
  height: 220px;
  width: 100%;
  background: var(--st-bg);
}

.fill-a {
  @st-chart-points(seriesA)
  opacity: 0.6;
  --st-accent: #9d7eff;
}
.line-a {
  @st-chart-points(seriesA)
  --st-accent: #9d7eff;
}

/* .fill-b / .line-b MUST set their own points, otherwise they'd
   silently inherit .chart's seriesA values */
.fill-b {
  @st-chart-points(seriesB)
  opacity: 0.3;
  --st-accent: #4fffb0;
}
.line-b {
  @st-chart-points(seriesB)
  --st-accent: #4fffb0;
}

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

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

Stack as many series as you want this way. Each one is independently opaque, colored, and pointed at its own array.

Custom Data Points and Markers

For a single highlighted marker (a peak, a tooltip anchor), use @st-chart-dot directly:

/* selector, x%, y%, size */
@st-chart-dot(.chart-dot, 70, 60, 12px)

To mark every point in a dataset automatically:

/* Generates .dot-1, .dot-2 ... .dot-N */
@st-chart-dots(.dot-, myData, 8px)

Combine that with @st-chart-grid(.chart-grid, rows, cols) and the axis wrappers @st-chart-axis-x / @st-chart-axis-y, and you've got a fully annotated chart with zero JS.

Making It Interactive Anyway

Pure CSS rendering doesn't mean the data has to be static. Updating a chart at runtime is just a matter of rewriting the --st-p{n} variables:

const chartLine = document.querySelector(".chart-line");
const normalize = (n) => (100 - n) + '%';

function updatePoints(pointsArray) {
  const cssVars = pointsArray
    .map((v, i) => `--st-p${i + 1}: ${normalize(v)};`)
    .join(' ');

  chartLine.style.cssText = cssVars;
}

updatePoints([50, 20, 85, 40, 95]);

Pair that with a transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1); on .chart-fill / .chart-line, and dataset changes animate smoothly through the browser's compositor, without touching layout or paint.

Why This Matters

Zero hydration. The chart is visible the instant CSS parses. No JS has to boot before you see data.
Tiny footprint. The compiled output is shapes and custom properties, around 0.8kb minified.
GPU-accelerated updates. Because everything animates through clip-path and CSS variables, transitions run on the compositor thread instead of the main thread.

If you're building something where every kilobyte of JS matters (embedded widgets, low-power devices, SEO-sensitive pages), st-core gets you real, responsive charts without the usual charting-library tax.

st-core.fscss is MIT licensed and built on FSCSS

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

DEV Community