MiniBar
React mini bar chart — a single magnitude as a compact bar from zero. Tiny accessible SVG microchart; RSC-safe static or /interactive.
MiniBar answers "which category is biggest, and by roughly how much?". Bars are always zero-anchored, and the data's own
order is the default truth — weekday order or funnel order carries meaning that ranking would destroy, so order is
explicit, never silent.
Install
import { MiniBar } from "@microcharts/react/mini-bar";// regions — real values under “Sample data” below<MiniBar data={regions} title="Sales by region" />Sample data
const regions = [ { label: "East", value: 940 }, { label: "West", value: 410 }, { label: "South", value: 620 }, { label: "North", value: 120 },];Try it
When to use it
- Good for — per-row category mix in tables, small comparisons in KPI cards.
- Avoid for — more than 8 categories (a full bar chart) or time series (SparkBar).
Sizing
Variants
The extremes named in the summary follow format/locale — 12400 reads "12.400" under de-DE rather than the English
"12,400".
Edge cases
A null value draws no bar but keeps its band, so the two real bars around it stay exactly as far apart as a fully
populated row — alignment across a column of MiniBars survives missing data. A single category still renders and its
summary says so plainly ("1 category…") rather than degenerating into a bare-bar special case. Past 8 categories the
component still renders every bar (nothing is dropped or truncated) but logs a dev warning — MiniBar is a cell chart,
and a wider comparison belongs in a full bar chart.
Four homes
Why this default
Unsorted by default: the data's order often IS information. Null values keep their slot as a gap, so a missing category never shifts its neighbors. Explicit domains are widened to include zero — a bar whose length doesn't start at zero is a lie, so the component refuses to draw one.
Accessibility
The accessible name carries count and extremes — "4 categories. Highest East 940, lowest North 120." The interactive entry announces each bar with its rank: "East: 940 — 1st of 4."
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* | { label; value }[] | Categories in meaningful order. |
| order | "data" | "desc" | "asc" | Ranking read vs positional read — data-facing, not styling. |
| highlight | number | string | Index or label to emphasize. |
| orientation | "horizontal" | "vertical" | Rows for wider, shorter cells. |
| positive | "up" | "down" | Engages pos/neg tokens on signed data. |
| label | "none" | "max" | Peak-value readout (vertical only; default "none"). |
| 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.
Related charts
RugStrip
React rug strip chart — 1-D density as a rug of marks on a shared line for raw samples. Tiny accessible SVG microchart; RSC-safe static or /interactive.
PictogramRow
React pictogram row chart — counts as a row of pictograms you can tally at a glance. Tiny accessible SVG microchart; RSC-safe static or /interactive.