ztd chartsHome

Flow · Advanced

Sankey diagram

How much flows between stages.

Open in playground
Use when
User flow from traffic source to purchase or drop-off
Avoid when
The flow loops back, or there are more than 30 nodes

Try it

26

Sankey diagram

From visit to purchase (users)
Sankey diagramSankey diagram. 9 nodes, 11 flows. Largest flows: Product page→Drop-off 4,700, Search→Product page 4,200, Product page→Cart 3,900.Search4,200Product page8,600Social4,000Promo page2,000Direct2,400Cart4,800Drop-off5,800Purchase2,900Drop-off1,900
Sankey diagram data
Search4,200
Product page8,600
Social4,000
Promo page2,000
Direct2,400
Cart4,800
Drop-off5,800
Purchase2,900
Drop-off 1,900
Search → Product page4,200
Social → Product page2,600
Social → Promo page1,400
Direct → Product page1,800
Direct → Promo page600
Product page → Cart3,900
Product page → Drop-off4,700
Promo page → Cart900
Promo page → Drop-off1,100
Cart → Purchase2,900
Cart → Drop-off 1,900
Half leave at the product pageAdvanced

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 sankey --variant <id>) and the MCP server know the same names.

Wide nodes

From visit to purchase (users)
Sample data

More space

From visit to purchase (users)
Sample data

Code

SankeyChart.tsx
import { ChartCard, SankeyChart } from "ztd-charts";

const data = [
  {"source":"Search","target":"Product page","value":4200},
  {"source":"Social","target":"Product page","value":2600},
  {"source":"Social","target":"Promo page","value":1400},
  {"source":"Direct","target":"Product page","value":1800},
  {"source":"Direct","target":"Promo page","value":600},
  {"source":"Product page","target":"Cart","value":3900},
  // … 5 more rows
];

export function Example() {
  return (
    <ChartCard number="26" title="Sankey diagram" subtitle="From visit to purchase (users)" takeaway="Half leave at the product page" level="advanced" replay>
      <SankeyChart
        data={data}
        source="source"
        target="target"
        value="value"
        highlight="Purchase"
      />
    </ChartCard>
  );
}

Props

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

27 props

Prop
dataRequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]
sourceRequiredSource nodestring | (d, i) => string
targetRequiredTarget nodestring | (d, i) => string
valueRequiredValue fieldstring | (d, i) => number
nodeWidthNode width (px)numberDefault 10
nodePaddingGap between nodes (px)numberDefault 14
heightCommonHeight in px. Without it, each chart picks a default that fits its widthnumber
widthCommonFixed width in px. Without it, the chart fits its parentnumber
highlightCommonItem to highlight. An index, a name, an array, or "max" | "min" | "first" | "last" | "none"number | string | (number|string)[] | "max" …
formatCommonValue 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" | …
unitCommonUnit appended to values. For example "%" or "ms"string
localeCommonLocale 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"
animateCommonEntry and update animationbooleanDefault true
durationCommonAnimation length (ms)number
easingCommonMotion curve"spring" | "easeOut" | "easeInOut" | "linear"Default "spring"
staggerCommonDelay between items as they enter (ms)number
reducedMotionCommon"auto" follows the OS setting. true always turns motion offanyDefault "auto"
animateOnViewCommonPlay when the chart scrolls into viewbooleanDefault true
showLabelsCommonLabels drawn on the chart (values and names)booleanDefault true
tooltipCommonShow 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
syncIdCommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring
ariaLabelCommonName for screen readersstring
descriptionCommonDescription for screen readers. Built from the data when omittedstring
onHoverCommonRuns when hover or keyboard focus moves to another item(e: ChartEvent | null) => void
onClickCommonRuns on click, Enter or Space(e: ChartEvent) => void
replayKeyCommonReplays the entry animation when it changesstring | number
themeCommonChanges theme tokens for this chart onlyPartial<ChartTheme>

Also in Flow