Skip to content
Motif UI
Go Pro
Craft

Charts without a chart library

The quality pages draw their distributions with two spans and a width percentage. That is a chart. Here is when the CSS version wins, and when it honestly doesn't.

Beginner1 min read (computed · recorded 6)updated 2026-09-12chartscssdata-viz

by Motif Editors

revised 2026-09-12 — First publication in bank-3 batch 4.

Key takeaways
  • — A track span, a fill span and a text number are a chart.
  • — The visual is decoration; the number is the data.
  • — Move to a library when readers must explore, not read.

The two-span bar

A track span with a background, a fill span with a width. Accessible for free (the number is text beside it), themeable for free (tokens), and impossible to make interactively confusing. Every distribution on /quality and every run bar on the prompt pages is this, and none of them mislead.

When you need more

Axes, brushing, log scales, live streaming — that is chart-library territory, and pretending otherwise is how hand-rolled SVGs get hover bugs. The honest line: CSS bars for counts and proportions; a library when the reader must explore, not just read.

One rule even the CSS version must keep: the visual is decoration, the number is the data. A screen reader should get the same truth without the bar.

the whole technique
<span class="track">
  <span class="fill" style="width: 72%"></span>
</span>
<span class="value">72 / 100</span>
Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.

Range-linked Chart ScrubberpracticeMomentum Chart CardpracticeBento Feature Gridpractice
The component this essay works with — mounted, not pictured
Range-linked Chart Scrubber →

Prompt fidelity, 184 run-tested prompts

19–55 of 184 · mean 87

82drag a bar, or focus a handle and use ← →93
Prompts in band
37
Band mean
87
Best model in band
Claude 4.6 Sonnet

The series is not decoration: it is the average fidelity of every prompt in the catalog, sorted, and the band selects real rows — the same averages the prompt cards print. Claude 4.6 Sonnet leads the selected band at 88.

Keep learning
All guidesTry the interactive Lab