For a while, st-core.fscss charts had one annoying limit: every line, fill, and dot was locked to exactly 8 data points. --st-p1 through --st-p8, hardcoded. Want to plot 12 weeks of revenue? Tough. Want 5 points for a quick demo? You'd pad the array with zeros and hope nobody noticed.
v2 gets rid of that.
The core change: Array (@arr)
Instead of passing 8 raw numbers into @st-chart-points, you now declare a named array of any length:
@arr myData[50, 10, 97, 35, 66, 50, 80, 54, 70, 60]
@st-chart-fill(.chart-fill, myData)
@st-chart-line(.chart-line, myData)
st-core reads the array length at compile time, works out even X-spacing across the chart width, and builds the clip-path: polygon() shape from however many points you gave it. 5 points, 12 points, 50 points, doesn't matter. No more counting to 8.
The gotcha that took me a minute to internalize
Here's the part that actually tripped me up while building the multi-series examples: @st-chart-line(selector, array) and @st-chart-fill(selector, array) aren't what set the data on an element. They declare the renderer for that selector, the array argument just tells it how many points to expect.
The thing that actually writes --st-p1…--st-p{n} onto an element is @st-chart-points(array).
That distinction matters the moment you have more than one series on a chart. In a multi-line setup, if .line-b doesn't call @st-chart-points(seriesB) itself, it silently inherits whatever the parent container set, meaning it renders the wrong dataset. Looks fine at a glance, wrong shape in practice. Caught it while building a 3-series dashboard card where two lines were quietly drawing the same data.
.fill-b {
@st-chart-points(seriesB) /* required, not optional */
opacity: 0.3;
--st-accent: #4fffb0;
}
Once that clicked, the mental model got simple: renderer declarations are structural (once per selector), point data is per-element (as many times as you have distinct series).
How it feels to ship
Pure CSS charting was already a fun constraint to design inside of, no JS runtime, no SVG, no canvas. Making the dataset size flexible removes the last thing that made it feel like a toy rather than something you'd reach for on a real dashboard. Compiled output is still under a kilobyte. Still zero hydration.
Docs and full examples are up in the repo, including the legacy v1 reference for anyone still on fixed 8-point charts.
Repo: github.com/fscss-ttr/st-core.fscss
Open-source
with ♥️
The source code is totally math notebook 😅
Have been writing and debugging from morning till night, and finally released it. The usage is now as simple as CSS.
😊