Components / Charts

Sankey

Flows between stages, drawn as ribbons whose width follows the amount.

Functions: cui_sankey

Usage

static const char *nodes[] = { "Search", "Social", "Referral", "Sign up", "Bounced", "Trial", "Paid", "Churned" };
static const cui_sankey_link links[] = { { 0, 3, 420 }, { 1, 3, 260 }, { 3, 5, 860 }, { 5, 6, 580 } /* ... */ };
cui_sankey(ui, "flow", nodes, 8, links, 8, .height = 300);

Columns follow the links from the sources, and an outcome sits at the step it is reached from, so a drop off stays beside the step it left and no ribbon crosses a column of nodes. Color goes to the outcomes, the largest first, and each ribbon takes the color of where it ends; sources and steps stay neutral gray, so the eye follows where things end up. Hover a node to highlight its links, or a ribbon to see the flow and its share of the source. A cycle in the links does not hang the layout.

Options of cui_sankey

Option	Type	Default	Description
.width	cui_size		Width: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own.
.height	float		Height in points; 0 uses the component's own.
.format	const char *		A printf format for the values, such as "%.0f ms".
.node_width	float	12	width of the node bars in points, default 12

cui_sankey_link

Field	Type	Description
from	int	index of the node the flow leaves
to	int	index of the node the flow enters
value	float	size of the flow: sets the link's thickness

Related

• Bar list and activity rings: A ranked list with a bar behind each row, and concentric rings that fill toward a goal.
• Funnel, split bar and waffle: Three charts for shares: a funnel for the steps of a conversion, a single bar split into parts, and a waffle of 100 squares.
• Scatter and bubble: Points on two axes, with an optional third value as the size of each bubble.
• Treemap and radar: A treemap shows the parts of a whole as rectangles sized by value. A radar chart compares items across several axes.