Block · intelligent

Flow Sankey

A layered Sankey that traces where every dollar (or user) goes — revenue sources folding into a hub and splitting across the cost stack — with hover-to-isolate and ribbon widths scaled to value.

State

Size

Mode

Acme · Q2 2026 revenue flow

$4.8M

total flow · 9 stages

$4.8M flows through 9 stages; the largest single flow is Existing contracts → Gross revenue ($3.54M), and the biggest endpoint is Sales & marketing at $1.85M.

Acme · Q2 2026 revenue flow — flows between stages
From	To	Value
New logos (May 2026)	Gross revenue	$520k
Add-on revenue	Gross revenue	$740k
Existing contracts	Gross revenue	$3.54M
Gross revenue	Hosting & infra	$1.2M
Gross revenue	Sales & marketing	$1.85M
Gross revenue	R&D	$780k
Gross revenue	G&A	$410k
Gross revenue	Operating profit	$560k

Acme Finance · updated hourly via QuickBooks

Demo data is illustrative. Replace with your own typed data prop.

Use it with your data

Data contract

Passed via the data prop — an object: validated at runtime, so a bad shape degrades to the error state rather than crashing.

Field	Type	Required
nodes	array	yes
links	array	yes

Static props

import { ChartFlowSankey } from "@/components/blocks/chart-flow-sankey/chart-flow-sankey";

<ChartFlowSankey data={myData} />

Client fetch (SWR)

const { data, isLoading, error } = useSWR("/api/metric", fetcher);
// route isLoading/error through <ChartStates>, then:
<ChartFlowSankey data={data} />

Server component (RSC)

const data = await fetch(url, {
  next: { revalidate: 3600 },
}).then((r) => r.json());

<ChartFlowSankey data={data} />

Map arbitrary rows

import { mapRows } from "@/lib/sextant/column-map";

const out = mapRows(rows, { /* contractKey: "yourColumn" */ }, dataSchema);
if (out.ok) <ChartFlowSankey data={out.data} />;

Make it yours

Every customization below is an optional prop — omit them all and you get the defaults shown above. Recolor, reformat, restyle, or drop the card chrome without forking the component.

Recolor or rename a series (node, flow)

<ChartFlowSankey
  series={{ node: { color: "var(--chart-3)", label: "…" } }}
/>

Format numbers (currency / locale)

const eur = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
  notation: "compact",
});

<ChartFlowSankey valueFormatter={(n) => eur.format(n)} />

Replace or hide the narrative

<ChartFlowSankey narrative="Your own one-liner." />

// …or hide it entirely:
<ChartFlowSankey narrative={false} />

Restyle any region

<ChartFlowSankey
  className="max-w-xl"
  classNames={{ body: "bg-muted/20" }}
/>

Drop the card chrome (headless plot)

import { ChartFlowSankeyPlot } from "@/components/blocks/chart-flow-sankey/chart-flow-sankey";

// Just the chart body — bring your own card/layout:
<ChartFlowSankeyPlot data={data} config={config} />