SparkBar

SparkBar renders discrete values as compact bars from a zero baseline. In winloss mode it collapses each value to its sign — a streak you can read at a glance: wins above the mid-line, losses below, and a tie (0) as a thin neutral dash on it.

Install

import { SparkBar } from "@microcharts/react/sparkbar";<SparkBar data={[4, 6, 2, 8, 5, 9]} title="Deploys per day" />

Try it

When to use it

• Good for — discrete magnitudes, win–loss streaks, period-over-period counts.
• Avoid for — a continuous trend shape (use Sparkline) or hundreds of points, where bars become noise.

Sizing

width and height are viewBox units that also set the rendered pixel box. Omit them and drive the width from CSS for a chart that fills its container — the viewBox keeps the aspect ratio.

Variants

The endpoint label and accessible summary both follow format/locale — 8600 reads "8.600" under de-DE rather than the English "8,600".

Edge cases

An empty series renders no bars and an accessible name that says so, rather than a flat or invented baseline. A single value still renders as one zero-anchored bar — winloss mode treats it the same way a longer streak would: a lone win, loss, or tie.

Four homes

Why this default

Bars, not a line, because SparkBar's job is discrete magnitudes — deploy counts, daily totals — where each period is its own thing, not a sampled point on a continuous curve. Zero-anchored always: a bar whose length doesn't start at zero misstates its magnitude. winloss mode goes further and discards magnitude entirely on purpose, collapsing each value to a three-state streak (win above the mid-line, loss below, tie a thin dash on it) because for a streak, sign is the whole story and a magnitude axis would just be noise. Sign is doubled by position AND color everywhere signed data appears, so direction survives forced-colors and never depends on color alone. In bar mode the endpoint bar takes the accent — "where did it land" is usually the first question a run of counts answers; in winloss mode it keeps its win/loss/tie color instead, because there the sign is what matters at every position, endpoint included.

Accessibility

Announced from the data — the example above reads:

Deploys per day. Trending up 125%. Range 2 to 9. Last value 9.

Sign is doubled by position (above or below the baseline), never by color alone, so the chart survives forced-colors and color-blind viewing.

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

Props

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.