DEV Community

Cover image for Advanced CSS Charts with st-core.fscss (Multi-Line, Grid, Axis — No JS Required)
FSCSS tutorial profile image FSCSS tutorial
FSCSS tutorial for FSCSS tutorial

Posted on

Advanced CSS Charts with st-core.fscss (Multi-Line, Grid, Axis — No JS Required)

#fscss #css #performance #opensource

What if you could build real charts using just CSS?

That's exactly what st-core.fscss enables.

What is st-core.fscss?

st-core.fscss is a lightweight data visualization system built on FSCSS. It lets you create line charts, multi-line charts, dashboard UIs, and stat cards — using pure CSS (with optional minimal JS).

Core Idea

Instead of rendering charts with Canvas or SVG, st-core uses:

  • clip-path: polygon() → to draw the chart shape
  • CSS variables (--st-p1…--st-p8) → to store data points
  • FSCSS mixins → to generate structure

So the flow becomes:

data → CSS variables → clip-path → visual chart
Enter fullscreen mode Exit fullscreen mode

No re-renders. No heavy libraries.

Multi-Line Chart Example

Here's a real example with multiple datasets in a single chart:

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

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

/* INIT */
@st-root()

.chart {
  height: 200px;
  position: relative;

  /* default dataset */
  @st-chart-points(20, 25, 21, 37, 30, 60, 27, 50)
}

/* ONE renderer */
@st-chart-line(.chart-line)

.chart-line {
  background: currentColor;
  @st-chart-line-width(2px);
}

/* MULTI DATASETS */
.line-1 { color: #32D8D4; }

.line-2 {
  color: #E8A030;
  @st-chart-points(10, 20, 16, 15, 66, 50, 80, 54)
}

.line-3 {
  color: #B840C8;
  @st-chart-points(5, 39, 20, 30, 27, 70, 60, 70)
}

/* GRID + AXES */
@st-chart-grid(.chart-grid, 10, 7)
@st-chart-axis-y(.y-axis)
@st-chart-axis-x(.x-axis)
</style>

<div class="chart">
  <div class="chart-line line-1"></div>
  <div class="chart-line line-2"></div>
  <div class="chart-line line-3"></div>

  <div class="chart-grid"></div>

  <div class="y-axis">
    <span>0</span><span>20</span><span>40</span>
    <span>60</span><span>80</span><span>100</span>
  </div>
</div>

<div class="x-axis">
  <span>Sun</span><span>Mon</span><span>Tue</span>
  <span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>
</div>
Enter fullscreen mode Exit fullscreen mode

Key Concept

Multi-line charts use one renderer + multiple datasets — not multiple renderers.

Each line element overrides its own data independently:

.line-2 {
  @st-chart-points(10, 20, 16, 15, 66, 50, 80, 54)
}
Enter fullscreen mode Exit fullscreen mode

The single @st-chart-line renderer reads whichever --st-p* variables are scoped to that element. Clean, predictable, composable.

Built-in Mixins

Mixin Output
@st-chart-line Line renderer
@st-chart-fill Area chart fill
@st-chart-dot Data point markers
@st-chart-grid Background grid
@st-chart-axis-x/y Axis label layout

All generated at compile time — zero runtime overhead.

Optional: Real-Time Data

To update a chart dynamically, set variables directly on the element:

chart.style.cssText = `
  --st-p1: 40%;
  --st-p2: 75%;
  --st-p3: 60%;
`;
Enter fullscreen mode Exit fullscreen mode

CSS handles the animation automatically. JS passes the data — CSS does the work.

Why This Approach Matters

Zero heavy dependencies.

Native performance — everything runs on the browser's own rendering pipeline.

Declarative data — your data lives in CSS, not in a config object.

Fully customizable — you build the chart style, you're not locked into presets.

Live Demo
→ fscss-ttr.github.io/st-core.fscss/multi-chart

st-core.fscss isn't just a chart library — it's a CSS-powered data visualization system. It turns CSS into a rendering engine and lets developers build charts with structure, not scripts.

MIT Licensed. Explore the repo and try building your own custom chart system.

Top comments (0)