React thermometer chart — progress toward a goal as a vertical fill from zero. Tiny accessible SVG microchart; RSC-safe static or /interactive.

Thermometer answers "where does this value sit on a calibrated range, and how close to the goal?" A column fills a ticked tube; the ticks calibrate the read, which is what buys the precision. The fill always anchors at the bottom of the range — never re-zeroed, never log — and an optional target line crosses the tube to mark the goal. The bulb is instrument chrome (always full); it is not data, so its area means nothing.

Thermometer

interactive · 3.92 kB · static · 2.48 kB

Install

Import & usereact/thermometer

import { Thermometer } from "@microcharts/react/thermometer";<Thermometer value={72} target={80} title="Fundraiser" />

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — a fundraising or goal-progress read, a capacity or utilization gauge in a cell, or any value against a stated range.
Avoid for — trends (Sparkline), proportions of a whole (SegmentedBar), or many series.

Sizing

Variants

horizontal cell + explicit ticks

Edge cases

out-of-domain clamps the fill; the accessible name keeps the true value

value at the domain floor

locale

The accessible summary's value, domain, and target all go through the same locale-aware formatter, so "7,234" becomes "7.234" in German grouping.

Four homes

Why this default

Vertical with the bulb is the default because the instrument metaphor is the point — a filling tube reads as "toward the goal" instantly. Horizontal exists for table cells where a vertical tube cannot fit, and bulb={false} drops the reservoir when the metaphor runs too warm for the context. The domain defaults to [0, 100] because a calibrated instrument needs a stated range; auto-fitting would silently move the scale under the reader. A value beyond the domain clamps the fill but the accessible name always reports the true number — the reading is never silently clipped.

Accessibility

The accessible name states the value on its scale — "62 on a 0–100 scale." — and appends the goal when a target is set. The interactive entry reveals the exact value on hover or focus, glides the fill to its new level with a reduced-motion-gated transition, and announces each change through a polite live region.

This chart is a single unit, so there is nothing to rove between: a click, tap, Enter or Space selects it and fires onSelect, and no selection stays pinned. That is the scalar half of the shared interaction contract. Hover or focus also reveals the reading itself in a floating chip, for the sizes and label modes where the mark does not print it; readout={false} drops the chip and keeps everything else.

Props

Prop	Type	Notes
value*	number	The reading.
target	number	A goal tick across the tube.
domain	[number, number]	The calibrated range (default [0, 100]).
ticks	number \| number[]	Tick count or explicit values.
orientation	"vertical" \| "horizontal"	Horizontal fits table cells.
bulb	boolean	Draw the reservoir bulb (default true).
fontSize	number	Type size of the tick and value numerals, in viewBox units (default 8).
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.