Stacked series flow around a centre line as smooth organic streams that grow out of the axis on mount. A crosshair reads every period, hovering a stream isolates it, and legend chips hide series while the remaining streams reflow.
npx shadcn@latest add https://hyperblur.dev/r/chart-streamgraph.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/chart-streamgraph.tsx.
import { ChartStreamgraph } from "@/components/hyperblur/chart-streamgraph"
<ChartStreamgraph baseline="center" height={240} />| Prop | Type | Default | Description |
|---|---|---|---|
| series | { name: string; color: string; values: number[] }[] | 6 traffic channels | Series to stack. Each values array lines up with labels. |
| labels | string[] | 14 weekly dates | Period labels along the x axis. Every other label is shown when there are more than 10. |
| baseline | "center" | "zero" | "center" | Center gives the classic streamgraph silhouette; zero stacks from the bottom like a stacked area chart. |
| height | number | 220 | Plot height in pixels. |
| title | string | "Sessions by channel" | Accessible title of the chart. |
| summary | string | Accessible description. Built from the data when omitted. | |
| unit | string | "k" | Suffix used by the default formatter. |
| format | (value: number) => string | Custom value formatter for the tooltip, legend and announcements. | |
| showLegend | boolean | true | Shows the toggle chips under the chart. |
| defaultHidden | string[] | [] | Series names hidden on first render. |
| onSeriesToggle | (name: string, visible: boolean) => void | Called when a legend chip hides or shows a series. The last visible series cannot be hidden. |