Sankey Chart

<SankeyChart nodes={nodes} links={links} height={300} />

Installation

SankeyChart requires echarts as a peer dependency.

npm install echarts

Barrel

import { SankeyChart } from "@cloudflare/kumo";

Granular

import { SankeyChart } from "@cloudflare/kumo/components/chart";

Usage

import { SankeyChart } from "@cloudflare/kumo";

const nodes = [
  { name: "Users", value: 103600, color: "#A78BFA" },
  { name: "Devices", value: 50800, color: "#60A5FA" },
  { name: "Apps", value: 122600, color: "#8B5CF6" },
  { name: "Tunnels", value: 31800, color: "#A78BFA" },
];

const links = [
  { source: 0, target: 2, value: 80000 },
  { source: 0, target: 3, value: 23600 },
  { source: 1, target: 2, value: 42600 },
  { source: 1, target: 3, value: 8200 },
];

export default function Example() {
  return <SankeyChart nodes={nodes} links={links} height={300} />;
}

Examples

Basic Sankey

A simple Sankey diagram showing flow between source and target nodes.

<SankeyChart nodes={nodes} links={links} height={300} />

Multi-Level Flow

Sankey diagrams can show multiple levels of flow through intermediate nodes.

<SankeyChart nodes={nodes} links={links} height={350} nodeWidth={20} nodePadding={15} />

Rich Tooltips

Use tooltipFormatter for full control over tooltip content.

import { SankeyChart, type SankeyTooltipParams } from "@cloudflare/kumo";

const customTooltip = (params: SankeyTooltipParams) => {
  if (params.type === "node" && params.node) {
    return "<strong>" + params.name + "</strong>";
  }
  if (params.type === "link" && params.link) {
    return params.link.source + " → " + params.link.target;
  }
  return "";
};

<SankeyChart 
  nodes={nodes} 
  links={links} 
  tooltipFormatter={customTooltip} 
/>

Interactive

Use onNodeClick and onLinkClick to handle interactions.

<SankeyChart 
  nodes={nodes} 
  links={links} 
  onNodeClick={(node, ctx) => console.log(node)}
  onLinkClick={(link, ctx) => console.log(link)}
/>

Drill-Down Filtering

Click a source node to filter the chart and show only its connections. Click again or use the reset button to restore the full view.

Click a source node to filter

const [selectedSource, setSelectedSource] = useState<string | null>(null);

const handleNodeClick = (node: { name: string }) => {
  if (sourceNames.includes(node.name)) {
    setSelectedSource(prev => prev === node.name ? null : node.name);
  }
};

<SankeyChart
  nodes={filteredNodes}
  links={filteredLinks}
  onNodeClick={handleNodeClick}
/>

API Reference

Component "SankeyChart" not found in registry. Run pnpm build:ai-metadata to regenerate.

Kumo