Sankey Diagram

data

Flow diagram showing proportional relationships between categories.

Preview

No preview available

Check the code examples below.

Installation

npm install @launchapp/design-system
Import
import { SankeyDiagram } from "@launchapp/design-system";

Examples

Traffic flow sankey

<SankeyDiagram  nodes={[{ id: "organic" }, { id: "paid" }, { id: "signup" }, { id: "purchase" }]}  links={[    { source: "organic", target: "signup", value: 400 },    { source: "paid", target: "signup", value: 200 },    { source: "signup", target: "purchase", value: 350 },  ]}/>

Props

PropTypeDefaultDescription
nodes*
SankeyNode[]—Array of nodes with id and label.
links*
SankeyLink[]—Array of links with source, target, and value.
← PreviousRealtime Ticker
Next →Scroll Animate