Data & ChartsPro

Slope Chart

Slope chart for change between columns: slope, rank shift, bump chart, dumbbell and parallel coordinates.

Usage

Slope Chart comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx

import { SlopeChart, SlopeChartProps, SlopeChartVariant } from "@wunderui/react"

Vendors on five measures, data table
name	Price	Speed	Uptime	Support	NPS
WunderUI	29	92	100	4.8	62
Brightline	49	78	99.9	4.1	41
Kaskade	19	64	99.5	3.6	22
Helio	39	85	100	4.4	48
Lumen	59	70	99.7	3.9	35

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Two years side by side with the biggest moves.

NPS change against last year

Prop	Type	Default
variant	"slope-chart" \| "rank-shift" \| "bump-chart" \| "dumbbell" \| "parallel-coordinates"	"slope-chart"
data · index · series	rows · string · columns	—
rankOrder	"desc" \| "asc"	"desc"
colors	ChartColor[]	—
state	"ready" \| "loading" \| "empty" \| "error"	"ready"
hiddenSeries · animate · animationKey	string[] · boolean · string \| number	—
data*	readonly ChartDatum[]	—
index*	string	—
series*	readonly ChartSeries[]	—
activeIndex	number \| null	—
animate	boolean	—
animationKey	string \| number	—
className	string	—
defaultActiveIndex	number \| null	—
description	string	—
height	number	—
hiddenSeries	readonly string[]	—
label	string	—
onActiveIndexChange	(index: number \| null) => void	—
onRetry	() => void	—
valueFormatter	ChartValueFormatter	—
width	number	—

The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.