StreamGraph

beta

D3-powered streamgraph with wiggle offset for AUM composition over time — organic flow aesthetic for multi-category stacked area visualization

import { StreamGraph } from "@danagraph/design-system/finance"

AUM Composition — Streamgraph
Period	Equities	Fixed Income	Alternatives	Cash	Real Assets
Feb 19	35.0	25.0	16.7	12.0	9.2
Feb 26	37.0	25.7	17.2	12.1	8.9
Mar 5	38.9	26.7	17.6	12.1	8.7
Mar 12	40.7	28.0	18.0	12.2	8.6
Mar 19	42.3	29.5	18.3	12.3	8.7
Mar 26	43.7	31.1	18.5	12.4	8.8
Apr 2	44.8	32.8	18.6	12.5	9.1
Apr 9	45.5	34.3	18.6	12.6	9.5
Apr 16	45.9	35.6	18.6	12.8	10.1
Apr 23	45.9	36.5	18.5	13.0	10.7
Apr 30	45.6	37.1	18.3	13.2	11.5
May 7	45.0	37.3	18.2	13.5	12.3
May 14	44.3	37.2	18.0	13.8	13.1
May 21	43.4	36.7	17.8	14.1	13.9
May 28	42.6	36.0	17.6	14.4	14.6
Jun 4	41.8	35.3	17.5	14.8	15.2
Jun 11	41.2	34.7	17.5	15.2	15.7
Jun 18	40.9	34.2	17.5	15.7	16.1
Jun 25	41.0	34.2	17.7	16.1	16.3
Jul 2	41.4	34.5	18.0	16.6	16.3

Loading demo…

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