Streamgraph

Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.

$npx shadcn@latest add @silicon-ui/streamgraph

datachartnew

Installation

$npx shadcn@latest add @silicon-ui/streamgraph

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/streamgraph/streamgraph.tsx
- components/silicon-ui/streamgraph/streamgraph.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { Streamgraph } from "@/components/silicon-ui/streamgraph/streamgraph";

Prop	Type	Default
`data*`	`StreamgraphDatum[]`	—
`series*` Layers from the centre out: the first runs through the middle of the stream, the rest alternate above and below it.	`StreamgraphSeries[]`	—
`label*` What is measured, such as "Support tickets by topic". Names the chart for assistive technology.	`string`	—
`unit` Unit after each value, such as "tickets".	`string`	`""`
`height` Plot height in pixels. The width follows the container.	`number`	`260`
`offset` "wiggle" minimises layer slopes for a flowing stream, "silhouette" centres the stack, "zero" stacks from a flat baseline.	`"wiggle" \| "silhouette" \| "zero"`	`"wiggle"`
`formatValue`	`(value: number, series: StreamgraphSeries) => string`	—
`hiddenSeries` Controlled hidden layer keys. A hidden layer thins to nothing and the rest reflow.	`string[]`	—
`defaultHiddenSeries`	`string[]`	—
`onHiddenSeriesChange`	`(hidden: string[]) => void`	—
`onActiveChange` Called as the reading moves, and with nulls when it leaves.	`(index: number \| null, seriesKey: string \| null) => void`	—
`legend` Layer toggles above the plot.	`boolean`	`true`
`directLabels` Names each layer inside its widest stretch when it is thick enough to hold the text.	`boolean`	`true`
`categoryLabel` Header of the first column in the screen reader table.	`string`	`"Date"`
`emptyLabel`	`string`	`"No data for this range"`
`ref`	`Ref<HTMLElement>`	—
`className`	`string`	—