Slope chart

A React component in Beamline's Charts & data-vis category.

Change between two points in time per item, by value or by rank: labels on both sides that never collide, rising and falling told by the end marker (▲ ▼) and the signed change as well as colour, and hover or focus to pick one item out.

Use it for

Before/after for a handful of items: share by channel this quarter against last, a ranking that moved.

Not for

Many periods (line-chart).
Exact amounts for one period (bar-chart).

Anatomy

title, description, table button
period headings (start, end; overline role)
start axis and end axis
one line per item, ending in ▲ (rose), ▼ (fell) or ● (flat)
start labels (item buttons: name and value; columns measured in the faces the look sets, so names never truncate while there is room)
end labels (value, signed change, name)
hatched stub for a missing end

Variants

0: scale: value · rank (1 at the top)
1: better: higher (rises are good, green) · lower (falls are good) · neither (accent and muted)
2: labels by room: full (name and value on both sides) · medium (names on the start side) · narrow, on phones (values at the start; value, ▲▼ and name at the end)

States

loading (skeleton)
empty
missing start or end: the known point stays, a hatched stub and “Not measured” stand on the missing side, no line is invented
active item (its line thickens and is drawn again on top; the others fade toward the card colour, and their labels step down to ink-3, never below 4.5:1)
pinned item (aria-pressed)
table view (start, end, change)
right-to-left: categorical period columns mirror with the comparison table; figures and date ranges remain LTR-isolated
names keep their own direction (dir=auto), so a truncated name shows its start in RTL too

Keyboard

Tab focuses the active (or first) item; ↑/↓ move through items in their start order, Home/End to the ends
Focus or hover highlights the item; Escape releases it
Each item's accessible name reads both values and the change
Label buttons and pointer line targets are at least 24 px tall/wide. Stable item keys control pinning; hover/focus preview never changes the caller selection. Overlapping line targets resolve to the nearest drawn line, not SVG paint order.

Motion

Lines draw from the start axis once; nothing moves under reduced motion. Highlight is immediate.

Props

Prop	Type	Default	Description
`data`	`SlopeItem[]`	—	{ key, label, start: number \| null, end: number \| null }.
`startLabel / endLabel` (required)	`string`	—	Period headings: "Q2", "Q3".
`scale`	`"value" \| "rank"`	—	Plot values, or positions in each period's ranking. Default value.
`better`	`"higher" \| "lower" \| "neither"`	—	Which direction reads as good. Default higher.
`format / formatChange`	`(v: number) => string`	—	Values, and the signed change (default: the difference in format's terms).
`height`	`number`	—	Plot height; 30 px per item, at least 200, by default.
`active / defaultActive / onActiveChange`	`string \| null`	—	The highlighted item's key.
`title / hideTitle / description`	`string / boolean / ReactNode`	—	The figure's name (a heading unless hidden) is always its accessible name.
`table`	`boolean`	—	Offer “View as table”. Default true.
`loading`	`boolean`	—	Skeleton of the chart's shape; keeps the frame's size.
`actions`	`ReactNode`	—	Controls beside the legend (range, offset).
`className`	`string`	—	Lands on the figure.
`formatChangeSpoken`	`(change: number) => string`	—	Full spoken change amount/unit after rose or fell. Receives the signed delta; return an unsigned amount such as 18 percentage points. Visible formatChange is unchanged.
`classNames`	`ChartClassNames`	—	Frame, tooltip and slice-list parts as applicable to this chart.
`style / ref`	`CSSProperties / Ref<HTMLElement>`	—	The native chart figure; layout measurement refs stay internal.

Dependencies

motion

Import

import { SlopeChart } from "@/components/slope-chart/slope-chart";

Get it

Slope chart is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent