SparkBar

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

import { SparkBar } from "@microcharts/react/sparkbar/interactive";<SparkBar  data={[4, 6, 2, 8, 5, 9, 3, 7, 6, 10]}  mode="bar"/>

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.

Where the plot floor sits

In bar mode the bars stand on the bottom edge of the viewBox. There is no bottom padding, so a bar's foot and the box bottom are the same line. That is what seats the chart on the text baseline when it sits inline. Draw your own rule or divider below the box rather than flush with it, or it covers the bar feet by a pixel or two. winloss mode insets its bottom edge instead, because a mid-line streak has no floor to stand on.

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.

A zero paints no bar. Bar length encodes magnitude, and zero magnitude is zero length, so the slot keeps its place on the pitch and stays empty. A period you have no reading for takes null, which occupies no slot at all. Pass the real zero rather than substituting null for it: the generated summary counts a zero in the range and skips a gap, and the interactive entry reads a zero as "0" where it reads a gap as "no data". In winloss mode a 0 is a tie instead — a state rather than a magnitude — so it keeps its dash on the mid-line.

Name the bars

The interactive entry takes labels, indexed like data. The hover readout then names the period it shows instead of only its value, and the live region announces the name ahead of the position:

import { SparkBar } from "@microcharts/react/sparkbar/interactive";

<SparkBar data={mrr} labels={["Jun 2026", "Jul 2026", "Aug 2026"]} />;

The chip reads Aug 2026 · 1.1K, and the announcement reads "Aug 2026. Point 3 of 12: 1.1K." The name also arrives on onActive and onSelect as datum.label, so a host that renders its own readout gets it without a second lookup.

A hole in the array, or an empty string, leaves that one bar on the positional wording. Both joins are localizable through the named and namedChip string templates. The static entry ignores labels: it has no readout to name, and the generated summary stays value-based.

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, press Escape, or press outside the chart. 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.