DEV Community

Cover image for Building a Data-Driven Chart UI with Zero JavaScript (Pure CSS + FSCSS)
FSCSS tutorial profile image FSCSS
FSCSS for FSCSS tutorial

Posted on

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

#tutorial #fscss #css #html

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)_, 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.

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

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

/* Initialize design tokens, layout base, and colors */
@st-root() 
@st-container(body) 
</style>
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode

3. Mapping Data to UI

This is where the magic happens. 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)
}
Enter fullscreen mode Exit fullscreen mode

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 ... */
}
Enter fullscreen mode Exit fullscreen mode

5. The Final HTML Structure

The HTML remains incredibly clean. No Canvas elements, no complex SVG strings—just a few semantic divs.

Why This Matters

  • Zero JS Overhead: The browser handles the rendering logic via CSS variables and clip-paths.
  • Declarative Data: You define data where you define your styles.
  • Fully Themeable: Since it uses CSS variables (--st-accent, etc.), switching to dark mode or changing brand colors is 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

Top comments (0)