Trend · Advanced

Streamgraph

Many series as flowing bands that show size and change.

Use when: 5 or more series where the rhythm of the flow matters, such as viewing by genre
Avoid when: You need to read exact values

Try it

Reduce motion

Streamgraph

Weekly viewing hours by genre (10k hours)

Streamgraph data
W1	Drama 21.6, Variety 8.4, Docs 6.3, Anime 18.1, Sports 7.4, Movies 14.5
W2	Drama 32, Variety 10.1, Docs 7.5, Anime 22.1, Sports 10.9, Movies 16.1
W3	Drama 38.4, Variety 12.5, Docs 8.8, Anime 22, Sports 10.6, Movies 17.7
W4	Drama 42.9, Variety 15.7, Docs 10.2, Anime 25.6, Sports 10.5, Movies 19.3
W5	Drama 44, Variety 19.7, Docs 7.9, Anime 24.9, Sports 10.6, Movies 21
W6	Drama 44.9, Variety 24.2, Docs 9.8, Anime 27.7, Sports 15, Movies 22.6
W7	Drama 38.4, Variety 28.6, Docs 11.9, Anime 26, Sports 15.6, Movies 24.1
W8	Drama 30, Variety 32.5, Docs 14.3, Anime 27.7, Sports 16.4, Movies 25.4
W9	Drama 21.6, Variety 35.1, Docs 12.8, Anime 24.9, Sports 17.4, Movies 26.5
W10	Drama 18.5, Variety 36, Docs 15.5, Anime 25.6, Sports 22.5, Movies 27.3
W11	Drama 13.1, Variety 35.1, Docs 18.2, Anime 22, Sports 23.8, Movies 27.8
W12	Drama 9.5, Variety 32.5, Docs 20.7, Anime 22.1, Sports 25, Movies 28
W13	Drama 7.1, Variety 28.6, Docs 18.9, Anime 18.1, Sports 26.1, Movies 27.8
W14	Drama 9.4, Variety 24.2, Docs 20.7, Anime 18.1, Sports 31.1, Movies 27.3
W15	Drama 8.1, Variety 19.7, Docs 22, Anime 14.2, Sports 31.7, Movies 26.5
W16	Drama 7, Variety 15.7, Docs 22.7, Anime 14.5, Sports 32, Movies 25.4
W17	Drama 6, Variety 12.5, Docs 18.9, Anime 11, Sports 31.7, Movies 24.1
W18	Drama 9, Variety 10.1, Docs 18.7, Anime 11.7, Sports 35, Movies 22.6
W19	Drama 8, Variety 8.4, Docs 18.2, Anime 8.7, Sports 33.7, Movies 21
W20	Drama 7, Variety 7.3, Docs 17.5, Anime 9.9, Sports 32, Movies 19.3

Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.

Variants

Named looks for this chart. Each one is the example above with a few options or fields changed. The CLI (ztd-charts example stream --variant <id>) and the MCP server know the same names.

Centered

Weekly viewing hours by genre (10k hours)

Data order

Weekly viewing hours by genre (10k hours)

Code

StreamGraph.tsx

import { ChartCard, StreamGraph } from "ztd-charts";

const data = [
  {"week":"W1","genre":"Drama","hours":21.6},
  {"week":"W1","genre":"Variety","hours":8.4},
  {"week":"W1","genre":"Docs","hours":6.3},
  {"week":"W1","genre":"Anime","hours":18.1},
  {"week":"W1","genre":"Sports","hours":7.4},
  {"week":"W1","genre":"Movies","hours":14.5},
  // … 114 more rows
];

export function Example() {
  return (
    <ChartCard number="15" title="Streamgraph" subtitle="Weekly viewing hours by genre (10k hours)" takeaway="Variety ruled the summer" level="advanced" replay>
      <StreamGraph
        data={data}
        x="week"
        y="hours"
        series="genre"
        highlight="Variety"
      />
    </ChartCard>
  );
}

Props

<StreamGraph> takes these props. Rows marked Common work the same on every chart.

31 props

Prop	Type	Default	Description
`data`RequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]	object[]	-	An array of objects. Pass CSV, REST or database rows as they are
`x`Requiredx fieldstring \| (d, i) => any	string \| (d, i) => any	-	x field
`y`Requiredy fieldstring \| (d, i) => number \| string[]	string \| (d, i) => number \| string[]	-	y field
`series`Series fieldstring \| (d, i) => string	string \| (d, i) => string	-	Series field
`offset`Baseline shape"wiggle" \| "silhouette"Default `"wiggle"`	"wiggle" \| "silhouette"	"wiggle"	Baseline shape
`reorder`Reorder the series for a cleaner shapebooleanDefault `true`	boolean	true	Reorder the series for a cleaner shape
`curve`Line shape"smooth" \| "linear" \| "step"Default `"smooth"`	"smooth" \| "linear" \| "step"	"smooth"	Line shape
`xType`Sets the x type yourself. Automatic when omitted: ISO dates, dotted dates such as "2025.03.01", Korean year-month-day dates, quarters such as "2024Q1" and English month names are read as dates. With "date", 10-digit numbers are Unix seconds"number" \| "date" \| "band"	"number" \| "date" \| "band"	-	Sets the x type yourself. Automatic when omitted: ISO dates, dotted dates such as "2025.03.01", Korean year-month-day dates, quarters such as "2024Q1" and English month names are read as dates. With "date", 10-digit numbers are Unix seconds
`dayFirst`Reads dates such as "05/03/2024", where either part could be the month, day first (5 March). Without it, a clear date in the column decides (25/03/2024), otherwise month first. true also reads "05.03.24" as day.month.yearboolean	boolean	-	Reads dates such as "05/03/2024", where either part could be the month, day first (5 March). Without it, a clear date in the column decides (25/03/2024), otherwise month first. true also reads "05.03.24" as day.month.year
`aggregate`How rows with the same x (and series) combine: "sum" adds them, "mean" averages, "last" keeps the last row, "count" counts rows"sum" \| "mean" \| "last" \| "count"Default `"sum"`	"sum" \| "mean" \| "last" \| "count"	"sum"	How rows with the same x (and series) combine: "sum" adds them, "mean" averages, "last" keeps the last row, "count" counts rows
`height`CommonHeight in px. Without it, each chart picks a default that fits its widthnumber	number	-	Height in px. Without it, each chart picks a default that fits its width
`width`CommonFixed width in px. Without it, the chart fits its parentnumber	number	-	Fixed width in px. Without it, the chart fits its parent
`highlight`CommonItem to highlight. An index, a name, an array, or "max" \| "min" \| "first" \| "last" \| "none"number \| string \| (number\|string)[] \| "max" …	number \| string \| (number\|string)[] \| "max" …	-	Item to highlight. An index, a name, an array, or "max" \| "min" \| "first" \| "last" \| "none"
`format`CommonValue format. "number" \| "integer" \| "percent" (values are already percents: 42 → "42%") \| "ratio" (0.42 → "42%") \| "compact" \| "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) \| "decimal" or Intl.NumberFormat options"number" \| "percent" \| "compact" \| …	"number" \| "percent" \| "compact" \| …	-	Value format. "number" \| "integer" \| "percent" (values are already percents: 42 → "42%") \| "ratio" (0.42 → "42%") \| "compact" \| "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) \| "decimal" or Intl.NumberFormat options
`unit`CommonUnit appended to values. For example "%" or "ms"string	string	-	Unit appended to values. For example "%" or "ms"
`locale`CommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault `"en-US"`	string	"en-US"	Locale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider locale
`animate`CommonEntry and update animationbooleanDefault `true`	boolean	true	Entry and update animation
`duration`CommonAnimation length (ms)number	number	-	Animation length (ms)
`easing`CommonMotion curve"spring" \| "easeOut" \| "easeInOut" \| "linear"Default `"spring"`	"spring" \| "easeOut" \| "easeInOut" \| "linear"	"spring"	Motion curve
`stagger`CommonDelay between items as they enter (ms)number	number	-	Delay between items as they enter (ms)
`reducedMotion`Common"auto" follows the OS setting. true always turns motion offanyDefault `"auto"`	any	"auto"	"auto" follows the OS setting. true always turns motion off
`animateOnView`CommonPlay when the chart scrolls into viewbooleanDefault `true`	boolean	true	Play when the chart scrolls into view
`showLabels`CommonLabels drawn on the chart (values and names)booleanDefault `true`	boolean	true	Labels drawn on the chart (values and names)
`tooltip`CommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault `true`	tooltip	true	Show tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left out
`syncId`CommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring	string	-	Charts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside it
`ariaLabel`CommonName for screen readersstring	string	-	Name for screen readers
`description`CommonDescription for screen readers. Built from the data when omittedstring	string	-	Description for screen readers. Built from the data when omitted
`onHover`CommonRuns when hover or keyboard focus moves to another item(e: ChartEvent \| null) => void	(e: ChartEvent \| null) => void	-	Runs when hover or keyboard focus moves to another item
`onClick`CommonRuns on click, Enter or Space(e: ChartEvent) => void	(e: ChartEvent) => void	-	Runs on click, Enter or Space
`replayKey`CommonReplays the entry animation when it changesstring \| number	string \| number	-	Replays the entry animation when it changes
`theme`CommonChanges theme tokens for this chart onlyPartial<ChartTheme>	Partial<ChartTheme>	-	Changes theme tokens for this chart only

Try it

Variants

Code

Props

Also in Trend