Data & ChartsPro

River Chart

River chart (streamgraph) for how a mix changes over time: plain, with gradient bands or offset.

Usage

Tickets by topic

Support tickets by topic, data table
month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

Installation

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

Then import what you need:

tsx

import { RiverChart, RiverChartProps, RiverChartVariant } from "@wunderui/react"

Examples

Basic River

Tickets by topic

Support tickets by topic, data table
month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

Gradient River

Tickets by topic

Support tickets by topic, data table
month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

Offset River

Tickets by topic

Support tickets by topic, data table
month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

State – Loading

Tickets by topic

In context

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

Ticket Topics

What customers write about, month by month.

What customers write about

Support tickets by topic, last 12 months

Support tickets by topic, data table
month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

API Reference

Prop	Type	Default
variant	"basic-river" \| "gradient-river" \| "offset-river"	"basic-river"
data · index · series	rows · string · { key, label?, color? }[]	—
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	—
axisFormatter	ChartValueFormatter	—
categoryAxis	boolean	—
categoryFormatter	(label: string) => string	—
categoryTicks	readonly string[]	—
className	string	—
defaultActiveIndex	number \| null	—
defaultSelectedRange	ChartRange \| null	—
description	string	—
emptyDescription	string	—
emptyTitle	string	—
errorDescription	string	—
errorTitle	string	—
grid	boolean	—
gridIntervals	number	—
gridStyle	"solid" \| "dashed"	—
height	number	—
hiddenSeries	readonly string[]	—
includeZero	boolean	—
label	string	—
onActiveIndexChange	(index: number \| null) => void	—
onRetry	() => void	—
onSelectedRangeChange	(range: ChartRange \| null) => void	—
rangeSelectable	boolean	—
selectedRange	ChartRange \| null	—
tooltip	boolean	—
tooltipTitle	(datum: ChartDatum, index: number) => React.ReactNode	—
valueAxis	boolean	—
valueAxisSide	"left" \| "right"	—
valueDomain	readonly [number, number]	—
valueFormatter	ChartValueFormatter	—
valueTicks	readonly number[]	—
width	number	—

Theming

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

Variable	Used for	Default
Color
	Value	#FFFFFFdark #1C1D20
Motion
	Duration	250ms
	Easing	cubic-bezier(0.22, 1, 0.36, 1)

PreviousRange Bar Chart NextSankey Chart

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78