Charts

SankeyChartNew in 0.8.0

Flow diagram where link thickness is proportional to value. Hover or focus a node to isolate its flows.

SankeyChart

Preview

Node width

Link opacity

Hover or focus a node to isolate its flows; click a link or node for details.

Usage

tsx

import { SankeyChart } from "@vesture/react";

<SankeyChart
  width={760}
  height={380}
  linkColor="gradient"
  nodes={[{ key: "visits", label: "Visits" }, { key: "signup", label: "Sign-up" }, { key: "paid", label: "Paid" }]}
  links={[
    { source: "visits", target: "signup", value: 350 },
    { source: "signup", target: "paid", value: 120 },
  ]}
/>

Behavior

Columns are assigned by longest path from the sources; links that would close a cycle are ignored for layering.
linkColor accepts a mode (source, target, gradient, neutral) or a function for per-link colors.

Props

Prop	Type	Default	Description
nodes	{ key; label?; color? }[]	—	Required.
links	{ source; target; value }[]	—	Required. Keys refer to nodes.
width / height	number	—	Required, in px.
nodeWidth / nodePadding	number	14 / 14	Node geometry.
align	"left" \| "justify"	"justify"	Whether sinks are pushed to the last column.
linkColor	"source" \| "target" \| "gradient" \| "neutral" \| (link, layout) => string	"source"	Link coloring.
linkOpacity / dimmedOpacity	number	0.35 / 0.08	Normal and de-emphasised link opacity.
colors	string[]	—	Palette cycled by node index.
renderNodeLabel	(node, info) => ReactNode	—	Replaces the label.
onNodeClick / onLinkClick	function	—	Make nodes / links interactive.