Sankey
Pure SVG Sankey diagrams for visualizing weighted flows between nodes.
Links are required. Nodes are optional and can customize labels, colors, and hover metadata.
Apple FY22 Income Statement
An income-statement style Sankey modeled after the Apple FY22 reference image, with product revenue, services revenue, cost, profit, tax, and expense branches.
Automatic Nodes
If a node appears in links but not in the nodes list, the component creates it automatically. Hover nodes and links to inspect metadata.
Tooltip Configuration
Hover popovers are enabled by default and can be disabled for compact static exports.
Explicit Nodes and Colors
Explicit nodes can provide labels and colors. Links can inherit source or target colors.
Color Policies and Values
Links support source color, target color, or a concrete CSS color. Values can be shown inline.
Flow and allocation visualization.
Proa UI Pro component source is proprietary and requires an accepted Proa UI Pro Commercial License Agreement. Subject to that agreement, the self-serve license includes the limited commercial Proa framework rights needed to use Proa UI Pro in closed-source products.
proa ui add sankeyRequires an active Proa UI Pro license and access to the private component registry.
CLI and registry setup