StreamGraph
D3-powered streamgraph with wiggle offset for AUM composition over time — organic flow aesthetic for multi-category stacked area visualization
import { StreamGraph } from "@nodus/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | StreamDataPoint[] | — | Array of time-indexed data objects with numeric values per key |
keys | string[] | — | Category keys to stack (must match data object properties) |
width | number | — | SVG width in px (default 640) |
height | number | — | SVG height in px (default 280) |
title | string | — | Accessible chart title |
dataStreamDataPoint[]Default —Array of time-indexed data objects with numeric values per key
keysstring[]Default —Category keys to stack (must match data object properties)
widthnumberDefault —SVG width in px (default 640)
heightnumberDefault —SVG height in px (default 280)
titlestringDefault —Accessible chart title
This component was designed to express:
Explore Related
Filled area chart for cumulative and stacked treasury data — liquidity buffers, stacked funding sources
D3-powered horizon chart for dense multi-series time-series — FX rate monitoring, cash position tracking, 10+ simultaneous series in compact lanes
D3-powered bump chart for rank changes over time — fund performance rankings, counterparty ranking shifts, quarterly peer comparison