Delta

Delta is a text-first metric: a signed number with a direction glyph. 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.

Install

import { Delta } from "@microcharts/react/delta";<Delta value={0.124} title="Revenue vs last week" />

Try it

When to use it

• Good for — a KPI's change, period-over-period percent, inline metric movement.
• Avoid 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 only the color for metrics where down is good (latency, churn, cost).

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 instead of a number, and "No change." rather than a misleading NaN%.

Four homes

Why this default

Direction is always double-encoded — the triangle's shape carries it as much as the color does — because a red/green-only read fails for color-blind viewers and under forced-colors. positive flips only which color means "good"; it never changes which way the glyph points, so a metric where down is good (latency, churn, cost) still shows an honest down-pointing triangle, just in the "good" color. Percent is the default format because most deltas are relative change, not raw magnitude — pass format for currency, counts, or any other unit. Non-finite input renders as an em dash rather than NaN%, because a broken number should read as "nothing to report," not as a fabricated value.

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

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.