TrendArrow
React trend arrow chart — direction and magnitude of change as a compact arrow. Tiny accessible SVG microchart; RSC-safe static or /interactive.
TrendArrow answers "which way is this moving?" at glyph size. The shape is the direction — up, down, or a flat bar — and color only reinforces it, so the read survives grayscale, print, and forced-colors. 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
- Good for — table direction columns, dense dashboards, inline movement cues.
- Avoid for — exact magnitudes (Delta) or series shape (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, an honest noise floor, and the number when the glyph alone is too terse.
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
Why this default
The arrow (shaft + head) stays legible at 8 px and in forced-colors where lighter marks blur; the glyph never scales
with magnitude — an arrow twice as long would be a lie at this precision. flatBand exists so tiny wiggles don't read
as movement: declare your noise floor instead of letting every ±0.1% look like a trend.
Accessibility
The default accessible name is the factual 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.
Related charts
ActivityGrid
React activity grid chart — contribution-graph intensity on a calendar or matrix. Tiny accessible SVG microchart; RSC-safe static or /interactive.
StatusDot
React status dot chart — discrete state double-encoded by color and shape. Tiny accessible SVG microchart; RSC-safe static or /interactive.