Streamgraph — Björk UI

Components•Streamgraph

Streamgraph

Layers flowing around a centre line, ordered inside out so the big steady layers sit in the middle and the seasonal ones ride the edges. Each layer keeps one colour from the legend to the tooltip, and past six the smallest fold into a grey Other. Switch between stream, stacked and 100% and every edge glides to its new place. The crosshair reads every layer at once; Enter or a click pins one in focus and greys the rest.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/streamgraph

How to use

import { Streamgraph } from "@/components/bjork-ui/charts/streamgraph";<Streamgraph  x={["Jan", "Feb", "Mar"]}  series={[    { id: "jazz", label: "Jazz", values: [120, 140, 132] },    { id: "folk", label: "Folk", values: [60, 72, 90] },  ]}  offset="wiggle"/>

Hip-hopElectronicIndieClassicalPopOther (3)

Listening hours by genre
Period	Ambient	Jazz	Hip-hop	Electronic	Indie	Classical	Pop	Folk
Jan 24	76k h	40k h	57k h	84k h	77k h	52k h	54k h	33k h
Feb 24	86k h	41k h	59k h	103k h	86k h	63k h	56k h	34k h
Mar 24	95k h	39k h	73k h	131k h	99k h	77k h	58k h	37k h
Apr 24	97k h	41k h	80k h	145k h	113k h	94k h	54k h	42k h
May 24	93k h	41k h	96k h	154k h	122k h	109k h	57k h	49k h
Jun 24	90k h	41k h	113k h	151k h	133k h	112k h	58k h	55k h
Jul 24	83k h	41k h	136k h	142k h	133k h	113k h	63k h	68k h
Aug 24	68k h	44k h	147k h	127k h	137k h	102k h	57k h	79k h
Sep 24	60k h	38k h	155k h	105k h	137k h	93k h	53k h	90k h
Oct 24	48k h	39k h	157k h	90k h	145k h	86k h	50k h	98k h
Nov 24	34k h	41k h	152k h	79k h	152k h	81k h	52k h	104k h
Dec 24	34k h	45k h	145k h	71k h	162k h	94k h	54k h	103k h
Jan 25	35k h	46k h	127k h	65k h	170k h	103k h	64k h	98k h
Feb 25	38k h	53k h	111k h	68k h	169k h	119k h	92k h	92k h
Mar 25	56k h	66k h	101k h	67k h	170k h	134k h	125k h	79k h
Apr 25	77k h	87k h	94k h	72k h	160k h	148k h	158k h	71k h
May 25	94k h	130k h	87k h	73k h	141k h	150k h	183k h	67k h
Jun 25	90k h	171k h	87k h	75k h	119k h	142k h	199k h	69k h
Jul 25	73k h	182k h	94k h	76k h	93k h	126k h	192k h	85k h
Aug 25	51k h	161k h	105k h	74k h	74k h	109k h	170k h	109k h
Sep 25	29k h	132k h	120k h	75k h	51k h	100k h	137k h	129k h
Oct 25	14k h	113k h	131k h	74k h	37k h	76k h	98k h	138k h
Nov 25	14k h	107k h	146k h	75k h	35k h	62k h	71k h	130k h
Dec 25	8k h	108k h	140k h	70k h	26k h	51k h	55k h	115k h

Options

Layout