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 Scrubberpractice Momentum Chart Cardpractice Bento Feature Gridpractice

Keep learning

All guides Try the interactive Lab