Streamgraph React component
A streamgraph of how a mix shifts over time: smooth streams flowing around a moving centre line, each swelling and thinning with its share, named inside where they're thick, with hover highlighting and a sorted weekly breakdown.
About the Streamgraph component
Streamgraph shows how a mix of topics, genres or products changes over time as smooth streams flowing around a moving centre line. Each stream swells when it's popular and thins when it fades, so rising and falling themes are easy to spot.
Streams are named inside where they're thickest; hover a stream or its legend item to pull it forward, and read any week's breakdown, sorted from biggest to smallest, in the tooltip.
When to use it
Use it for topics in feedback or support tickets, music or content genres over time, traffic by referrer, product mix and any story about themes rising and falling.
It shows shape and change, not exact totals; when precise comparison matters, use a stacked area or line chart.
Installation
Add the Streamgraph component to your project with the shadcn CLI. It lands in components/streamgraph.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/streamgraphOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<Streamgraph /> accepts 9 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Feedback by topic" |
| subtitle | string | "Weekly mentions in support tickets and reviews, 2025" |
| series | { label: string; values: number[]; color?: string }[] | SAMPLE.series |
| labels Label for each x position. | string[] | SAMPLE.labels |
| offset "silhouette" centres the streams; "wiggle" also minimises how much they slope (less jitter). | "silhouette" | "wiggle" | "wiggle" |
| inlineLabels Write each stream's name inside it where it's thick enough. | boolean | true |
| height Height of the plot, in px. | number | 300 |
| formatValue | (value: number) => string | (v) => Math.round(v).toLocaleString("en-US") |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Feedback by topic"
- subtitlestringDefault: "Weekly mentions in support tickets and reviews, 2025"
- series{ label: string; values: number[]; color?: string }[]Default: SAMPLE.series
- labels
Label for each x position.
string[]Default: SAMPLE.labels - offset
"silhouette" centres the streams; "wiggle" also minimises how much they slope (less jitter).
"silhouette" | "wiggle"Default: "wiggle" - inlineLabels
Write each stream's name inside it where it's thick enough.
booleanDefault: true - height
Height of the plot, in px.
numberDefault: 300 - formatValue(value: number) => stringDefault: (v) => Math.round(v).toLocaleString("en-US")
npm dependencies
Installed for you by the shadcn CLI.
Streamgraph FAQ
- How do I pass data?
- series is { label, values, color? }[], where values has one number per x position, and labels has the matching x labels. Streams stack in the order given, from bottom to top.
- What's the difference between the offsets?
- "silhouette" centres each column on the middle line. "wiggle" (the default) also shifts the baseline to minimise how much the streams slope, which looks calmer and makes individual streams easier to follow.
- Can I turn off the names inside the streams?
- Set inlineLabels={false}. Names only appear where a stream is thick enough to hold them anyway.
- Is it accessible?
- The chart is focusable with a text summary of each stream's total and peak; left and right arrows move through weeks, up and down highlight a stream, Escape clears. With reduced motion it appears without the reveal.
