SlopeChart

A before-and-after chart on two axes, where each item's line draws in, rank moves sit beside the end values, and switching datasets slides every line to its new slope.

When to use

• Exactly two moments and three to ten items: quarter over quarter, before and after a launch, last year against this year.
• When both the change and the change in order matter; ranks shows the moves.
• Not for more than two moments; use LineChart. Not for more than about ten items, where labels crowd; use BarChart.

Usage

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

h(SlopeChart, {
  label: "Cross-validated R² by country model",
  startLabel: "Jul 2026",
  endLabel: "Aug 2026",
  highlightKey: "gr",
  formatValue: (v) => v.toFixed(3),
  data: [
    { key: "gr", label: "Greece", start: 0.612, end: 0.678 },
    { key: "pt", label: "Portugal", start: 0.702, end: 0.655 },
    { key: "de", label: "Germany", start: 0.961, end: 0.978 },
  ],
});

Props

Prop	Type	Default	Description
data	{ key: string; label: string; start: number; end: number }[]	required	Items. Keys keep lines stable across datasets.
label	string	required	What is measured; names the chart, summary and table.
startLabel / endLabel	string	required	Column headings, such as Q2 and Q3. Keep them short.
formatValue	(value: number) => string	—	Values beside points, in the tooltip and table.
formatChange	(change, item) => string	difference in formatValue terms	Change in the tooltip.
height	number	44px per item	Plot height.
highlightKey	string | null	null	Item drawn in the first series hue.
activeKey / onActiveChange	string | null / callback	—	Item in focus; others fade.
ranks	boolean	true	Rank movement beside each end value.
emptyLabel	string	"No data"	Shown when there are no items.
className	string	—	Class on the root figure.
ref	Ref<HTMLElement>	—	Forwarded to the root figure.

Notes

• Keyboard: Tab focuses the chart and reads the top item by end value; arrows move through items in end order, Home/End jump, Escape clears.
• Accessibility: a focusable group with instructions; a polite live region announces both values, the change and the rank move; a hidden summary and table list every item. Rank moves use an arrow glyph and a number, not colour alone.
• Labels sit to the left of the start values and truncate when long; keep item names to two or three words.
• Motion: lines draw in on view and slide between datasets; reduced motion shows them fully drawn.
• Reads --series-1 for the highlight and neutral text tokens for the rest.