Sparkline

A sparkline for React in a word's space: a line through a run of numbers with its last point marked, quiet by default and in the accent for the one that matters.

Install

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/sparkline

Examples

One rising line among steady ones

Relay Kestrel8
Relay Ashgrove15
Relay Pellmoor2

sparkline-relays.tsx

import { Sparkline } from "@/components/zero/sparkline";const relays = [  { name: "Relay Kestrel", values: [9, 8, 9, 7, 8, 8, 7, 8] },  { name: "Relay Ashgrove", values: [2, 3, 3, 5, 6, 9, 12, 15], hot: true },  { name: "Relay Pellmoor", values: [11, 9, 7, 6, 4, 4, 3, 2] },];export default function SparklineRelays() {  return (    <ul className="grid w-full max-w-sm gap-3">      {relays.map((relay) => (        <li          key={relay.name}          className="flex items-center justify-between gap-4 border-zero-line border-b-(length:--zero-stroke-thin) pb-3"        >          <span className="font-bold font-zero italic">{relay.name}</span>          <span className="flex items-center gap-3">            <Sparkline values={relay.values} hot={relay.hot} />            <span className="w-[2ch] text-end font-black font-zero tabular-nums">              {relay.values.at(-1)}            </span>          </span>        </li>      ))}    </ul>  );}

Behaviour

It is sized in em, four wide to one tall, so it follows the text it sits beside; set a width and height to change that. The line is scaled to the run's own peak, so read it for its shape, not against another sparkline's height. For axes and values, use a Chart.

hot draws it in the accent and lights its last point. Keep that to the few lines that should be seen first; a page of hot lines is no different from a page of quiet ones.

It is an image to screen readers. Without a label it says the run in words: how many points, where it started, where it ends and its peak.

Props

Sparkline

Prop	Type	Default	Description
values	number[]	—	The run, oldest first.
hot	boolean	false	Draw it in the accent, its last point glowing.
label	string	—	What screen readers hear instead of the run.