Delta
Delta renders a signed change as inline text, with direction carried by both a glyph and a color.
- encodes
- text + direction glyph (▲/▼)
- precision
- high — it is the number
- nodes
- 2 (glyph + value, HTML)
Delta prints a signed number with a direction glyph: +12.4% with an up triangle, −8% with a down one. It is
text-first, so it reads inline, next to a KPI, or inside a table cell. Direction is always doubled, a triangle and a
color, so it never relies on color alone: a red/green-only read fails for color-blind viewers and under forced-colors.
Install
import { Delta } from "@microcharts/react/delta";<Delta value={0.124} title="Revenue vs last week" />Try it
When to use it
Use it for a KPI's change, a period-over-period percent, or inline metric movement. Skip it for showing a series or comparing magnitudes across items.
Sizing
Delta is text, not a fixed box — it takes the font-size of whatever wraps it and its glyph scales in em. Size it by
the surrounding type: inline, it inherits the sentence; beside a KPI figure, lift the font-size to match.
Variants
from derives a percent change. positive="down" flips which color means "good" for metrics where down is good
(latency, churn, cost); it never changes which way the glyph points, so such a metric still shows a down-pointing
triangle in the "good" color. Percent is the default format, since most deltas are relative change rather than raw
magnitude. Pass format for currency, counts, or any other unit.
format also takes Intl.NumberFormatOptions — with a locale, the magnitude follows that locale's own grouping and
decimal marks (a German reader sees a comma decimal and a space before the %, not a period). The leading sign is the
library's own + / −, so it reads the same in every locale.
Edge cases
A zero delta shows the flat glyph and "No change.", never a +0%/−0% that implies a direction with nothing behind
it. NaN and ±Infinity degrade the same way: the flat glyph, an em dash in place of a number, and "No change."
rather than a misleading NaN%.
Four homes
Accessibility
Delta renders accessible inline text — the glyph is decorative and the value carries the meaning. Color is a redundant channel on top of the direction glyph and the sign, so the change survives forced-colors and color-blind viewing. The interactive entry re-announces the figure through a polite live region when the value changes.
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.
Props
| Prop | Type | Notes |
|---|---|---|
| value* | number | The change, or current value when from is set. |
| from | number | Prior value; Delta shows the percent change. |
| positive | "up" | "down" | Which direction is good (colors only). |
| format | Intl.NumberFormatOptions | fn | Number formatting. |
| locale | string | string[] | BCP 47 locale(s) for the formatted number. |
| summary | string | false | Override or disable the auto 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.