Sparkline

Inline mini chart — line, area, or bar — with no axes or chrome. Hand-rolled SVG, no dependencies. Scales fluidly to its host's CSS size, so the same component works inside a Stat card, a table cell, or as a standalone trend strip. Pairs with Stat for the metric card pattern.

a11y (built in): each sparkline is one labelled image — LB.Sparkline puts role="img" on the host and writes an aria-label summarising the series ("Sparkline: 8 points, rising from 12 to 28"), so the SVG is announced as a single node instead of a pile of shapes. The label is rebuilt on every render — setData() and ResizeObserver redraws included — so a live strip never reads a stale trend, and with no hover or tooltip layer there is nothing here to focus or trap.

Usage: Add data-lb-sparkline to a wrapper. Set data-lb-data="1,2,3,…" for the series. Variants: data-lb-variant="line|area|bar". Add data-lb-dot for an end-of-series circle. Override color via data-lb-color or style="--color: …".

Variants — line, area, bar

Three rendering modes share the same data input.

With end dot — data-lb-dot

Marks the latest data point — useful for live metric strips.

Custom colors

Override the default series color with data-lb-color (any CSS color) or with a token via style="--color: var(--lb-data-N)".

Metric card — Stat × Sparkline × Card

The canonical metric card: KPI on the left, trend strip below or beside it. Four-column Grid composes a header strip for any dashboard.

Live updates — setData(arr)

Use the JS API to swap data live (live monitoring, websocket feeds, demo / preview).