MiniBar
MiniBar compares a handful of categories as zero-anchored bars, in the order the data arrives.
- encodes
- bar length, zero-anchored
- precision
- high
- nodes
- 1 per bar (≤ 8 documented)
MiniBar draws one zero-anchored bar per category, in the order the data arrives, so a row of categories reads at a
glance: which is biggest, and by roughly how much. That order is often information itself: weekday order and funnel
order carry meaning that ranking would destroy, so sorting is an explicit order prop and never silent. An explicit
domain is widened to include zero, because a bar whose length doesn't start at zero misstates its own magnitude, and
the component refuses to draw one.
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
Use it for per-row category mix in tables and small comparisons in KPI cards. Past 8 categories reach for a full bar chart; for time series use 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 in a fully
populated row, and a column of MiniBars stays aligned through 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 every
bar still renders, with nothing dropped or truncated, but the component logs a dev warning: MiniBar is a cell chart, and
a wider comparison belongs in a full bar chart.
Four homes
Accessibility
The accessible name gives the count and the 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.