Building a Data-Driven Chart UI with Zero JavaScript (Pure CSS + FSCSS)

Source: Dev.to

Most modern web charts rely on heavy JavaScript libraries. While powerful, they often come with a performance cost and complex integration steps.

What if you could build a fully styled, data‑driven chart UI using Pure CSS?

By using FSCSS and its utility system, st‑core (statistic core) — st-core.fscss — we can transform raw data into visual interfaces directly within our stylesheets.

1. The Setup

First, include the FSCSS runtime and import the st-core helpers.

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

/* Initialize design tokens, layout base, and colors */
@st-root();
@st-container(body);

2. Attaching the Components

st-core.fscss uses directive‑like helpers to generate the complex logic needed for backgrounds, lines, and markers.

@st-chart-fill(.chart-fill);    /* Area under the line */
@st-chart-line(.chart-line);    /* The actual trend line */
@st-chart-dot(.chart-dot, 70, 60); /* Data point marker at x=70, y=60 */

3. Mapping Data to UI

The @st-chart-points helper maps your numeric data points into CSS variables. These variables are then used to calculate a clip-path that draws the chart.

.chart {
  width: 300px;
  height: 400px;
  border-radius: 25px;
  border: 2px solid var(--st-accent);
  position: relative;
  overflow: hidden;
  background: var(--st-surface);

  /* The Data: These points define the shape of the graph */
  @st-chart-points(20, 25, 21, 37, 30, 60, 27, 50);
}

4. Customizing the Visuals

Because this is CSS, customization is trivial. You can use filters, transitions, and standard properties to polish the UI.

/* Add a glow to the line */
.chart-line {
  @st-chart-line-width(2px);
  filter: drop-shadow(0 0 8px var(--st-accent));
}

/* Style the tooltip and point */
.chart-dot {
  position: relative;
  --st-accent: #c4a8ff; /* Local theme override */
}

.chart-dot:after {
  content: attr(data-point); /* Pulls data from HTML attribute */
  background: var(--st-accent);
  padding: 6px 8px;
  border-radius: var(--st-radius-sm);
  /* ... positioning ... */
}

5. The Final HTML Structure

The HTML remains incredibly clean—no elements, no complex SVG strings—just a few semantics.

Why This Matters

• Zero JS Overhead – The browser handles rendering via CSS variables and clip-paths.
• Declarative Data – Data lives alongside your styles.
• Fully Themeable – CSS variables (--st-accent, etc.) make dark mode or brand‑color switches instantaneous.

This approach shifts the paradigm: CSS isn’t just styling the UI; it’s generating the UI from data.

Check out the project here: st-core on GitHub.