vue-charts Journey Sankey
A journey Sankey shows how sessions move through a site. Each column is a step, each node a page at that step, and each band the sessions that went from one page to the next. Hovering a band or a page highlights every path connected to it; the grey part of a node shows the sessions that ended there.
Data: journeys, not links
Give the chart whole journeys: the pages in order and how many sessions took each one.
const journeys = [
{ path: ['/', '/pricing'], count: 6 },
{ path: ['/', '/pricing', '/', '/docs'], count: 2 },
]
From journeys the chart knows what plain node and link data cannot tell: how many sessions ended at a node (the grey segment and the "end here" share), and the exact journey to pin when you click. The same page at different steps is a different node.
If your journeys were cut before they reached the chart (for example, "top 15 paths, 4 steps deep" where longer sessions were truncated), set :exits-known="false". The last column never claims exits, because longer journeys continue past it.
Highlight and pin
- Hover a band or a page: every band on a path through it stays visible (0.45 opacity), the others fade to 0.07, and unrelated pages fade.
- Click a band or a page to pin the largest journey through it; click again to unpin. Bind
v-model:pinnedto read or set the pinned journey, for example to show it as a filter. - Keyboard: focus the chart, move with the arrow keys (up and down within a step, left and right along the largest band),
EnterorSpacepins the focused node and emitsnode-click,Escapeclears.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Row[] | required | One row per journey |
path-key / data-key | row path or accessor | 'path' / 'count' | Fields for the steps and the session count |
steps | number | longest journey | Columns to show; longer journeys are cut |
exits-known | boolean | true | Whether a journey's end means the session ended |
color | string | var(--v-charts-series-1, var(--v-charts-series, #2563eb)) | Bands and nodes |
exit-color | string | var(--v-charts-inactive, #a3a3a3) | The "ended here" part of a node |
node-width / node-padding | number | 8 / 8 | Node bar width and space between nodes |
pinned | string[] | null | — | Pinned journey, for v-model |
headers | boolean | true | Step headers with totals and the share of the previous step |
node-href | (name, node) => string | undefined | — | Turns page names into links |
subtitle-formatter | (node) => string | '11 · 55% end here' | Second line under each name; use it to translate |
locale | string | 'en-US' | Number format |
width / height / aspect | number | full width, room for every label | Size |
Events and slots
| Payload | Description | |
|---|---|---|
@node-click / @link-click | (node | link, index, event) | Fired after pinning; event is a KeyboardEvent for Enter or Space on a node |
@node-mouseenter / @node-mouseleave | (node, index, event) | Node hover events |
@link-mouseenter / @link-mouseleave | (link, index, event) | Link hover events |
#header | { step, x, total, previousTotal, width } | Replace a step header, for example to add a filter menu |
#label | { node, subtitle } | Replace a node's label, drawn right of the node |
| default slot | — | Place <Tooltip> here |
Compared with Sankey
Sankey lays out any flow graph from nodes and links (budgets, energy). JourneySankey is for ordered steps: it keeps pages in columns, knows where sessions ended, and can pin exact journeys.
The row type Row is inferred from data. Key props accept typed row paths or accessors.
Node indexes address the layout node list; link indexes address the layout link list.
JourneyNode<Row>.rows and JourneyLink<Row>.rows contain the contributing source rows.
Events, labels and tooltip payloads retain the derived layout object.