TrendArrow
TrendArrow shows the direction of a change as a glyph, with a declared flat band for noise.
- encodes
- glyph orientation (up / down / flat)
- precision
- low — use Delta when the magnitude matters
- nodes
- ≤ 2 (glyph + optional value)
A latency number moved 8% and the table cell has room for one glyph. TrendArrow encodes the direction in the shape: up, down, or a flat bar. Color reinforces the shape, so the read survives grayscale, print, and forced-colors. The glyph never scales with magnitude: an arrow twice as long would claim precision this size can't carry. When the magnitude matters, reach for Delta instead.
Install
import { TrendArrow } from "@microcharts/react/trend-arrow";<TrendArrow value={-0.08} positive="down" title="Latency vs last week" />Try it
When to use it
Use it for table direction columns, dense dashboards, and inline movement cues. For exact magnitudes use Delta; for the shape of a series use Sparkline.
Sizing
The glyph is a fixed 16-unit box that scales like an image — size it with CSS. With showValue the viewBox widens to
reserve a gutter for the number, so text never paints outside the chart.
Variants
Three glyph weights for three densities, a declared noise floor, and the number itself when the glyph alone is too terse. The default arrow keeps its shaft and head legible at 8 px and in forced-colors, where lighter marks blur.
flatBand is where you declare your noise floor, so a ±0.1% wiggle reads as no change instead of a trend.
Edge cases
format/locale reach showValue's number and the accessible summary's magnitude together — "12,483" becomes "12.483"
in German grouping.
Four homes
Accessibility
The default accessible name is the direction: "Up 12%.", "No change." within the flat band, "No data." for
non-finite input. positive="down" flips only the color, never the glyph or the words. The interactive entry announces
direction changes through a polite live region and pulses the glyph, gated on reduced motion.
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 | Signed change; sign → direction, magnitude only via showValue/summary. |
| flatBand | number | Noise floor: |value| ≤ flatBand renders the flat glyph. |
| glyph | "arrow" | "triangle" | "chevron" | Mark weight: default legibility, dense cells, inline text. |
| showValue | boolean | Append the formatted value in a right gutter. |
| positive | "up" | "down" | Which direction is good (colors only, never the glyph). |
| 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.