SparkBar
SparkBar renders discrete values as zero-anchored bars, or a win–loss–tie streak in winloss mode.
- encodes
- length (bar height from a zero baseline)
- precision
- high
- nodes
- 1 per bar
SparkBar renders discrete values as compact bars from a zero baseline: one bar per period, always anchored at zero,
because a bar that starts anywhere else misstates its magnitude. Each period is its own count — a deploy total, a daily
total — rather than a sample on a continuous curve. In bar mode the endpoint bar takes the accent, since "where did it
land" is usually the first question a run of counts answers.
winloss mode discards magnitude on purpose and collapses each value to its sign: wins above the mid-line, losses
below, and a tie (0) as a thin neutral dash on it. There every bar keeps its own win/loss/tie color, endpoint
included, because the sign is what matters at each position. Sign is doubled by position and color wherever signed data
appears, so direction survives forced-colors.
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
Use it for discrete magnitudes, win–loss streaks, and period-over-period counts. For a continuous trend shape use Sparkline, which is also the better choice at 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, and winloss mode treats it the same way a longer streak would: a lone
win, loss, or tie.
Four homes
Accessibility
The accessible name is generated 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
| Prop | Type | Notes |
|---|---|---|
| data* | number[] | Values; negatives dip below the baseline. |
| mode | "bar" | "winloss" | Magnitude bars, or a win/loss/tie streak (sign only). |
| gap | number | Empty fraction of each slot (0–0.9). |
| label | "none" | "last" | Direct endpoint value label. |
| positive | "up" | "down" | "up" (default); "down" flips which sign is good. |
| title | string | Accessible name; joins the auto summary. |
| summary | string | false | Override or disable the auto summary. |
| locale | string | string[] | BCP 47 locale(s) for the endpoint label and summary. |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
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.