Sankey Chart

Hover or focus to trace connected branches. Use arrow keys to inspect nodes, then connections; Enter selects. On narrow screens, scroll horizontally to follow the journey.

Usage

import { SankeyChart } from "@/components/charts/sankey-chart";

const nodes = [
  { id: "start", label: "Sign up" },
  { id: "email", label: "Email" },
  { id: "sso", label: "Single sign-on" },
  { id: "done", label: "Account created" },
];
const links = [
  { source: "start", target: "email", value: 620 },
  { source: "start", target: "sso", value: 380 },
  { source: "email", target: "done", value: 620 },
  { source: "sso", target: "done", value: 380 },
];

export function SignupPaths() {
  return <SankeyChart nodes={nodes} links={links}
    height={400} ariaLabel="Signup paths" />;
}

Reading a flow

Each ribbon represents one supplied transition. The email branch carries 620 of the 1,000 outgoing transitions, so its share is 62%. The destination receives 620 + 380 = 1,000. The chart does not deduplicate people or infer transitions from stage totals.

A node uses the larger of its incoming and outgoing totals for its height. An imbalance stays visible in inspection. To show abandonment, supply an explicit destination and its measured connections. A zero volume has no painted area, but remains inspectable.

Connections must form an acyclic graph. For a return visit, give the repeated event a new ID at a later step. Highlighting shows reachable connections; aggregated volumes cannot recover an individual user's complete route through a merge.

For conversion through one ordered sequence, use the Funnel Chart.