Sankey

Use a Sankey chart to show weighted flow between two categorical stages.

Sankey rows are compiled as a two-sided flow contract: source nodes stay on the source side and target nodes stay on the target side. This is intentionally fixed for truthful source/target semantics; the closed schema rejects an unrecognized presentation.nodeAlignment option rather than silently ignoring it.

Every preview on this page is generated from the YAML shown below it using a fixed documentation dataset.

Basic flow

Map two dimensions to source and target nodes and one metric to link width, revealing how orders flow from status to delivery speed.

Key fields

visuals:
  status_delivery_flow:
    title: Status to delivery speed
    description: Shows flow from order status to delivery-speed bucket.
    type: sankey
    presentation:
      type: hierarchy
      orientation: horizontal
      labels:
        density: automatic
        priority:
        - selected
        - anomaly
        - threshold
        maxCharacters: 18
        minimumSpacing: 6
        tooltipFallback: true
    query:
      type: aggregate
      dimensions:
      - status
      - delivery_bucket
      metrics:
      - order_count
      sort:
      - field: order_count
        direction: desc
      limit: 40

Alternate flow

Replace the source and target dimensions to inspect category-to-status flow without changing the weighted graph contract.

Key fields

visuals:
  category_status_flow:
    title: Category to status flow
    type: sankey
    query:
      type: aggregate
      dimensions:
      - category
      - status
      metrics:
      - order_count
      sort:
      - field: order_count
        direction: desc
      limit: 60
    presentation:
      type: hierarchy

Spacious nodes

Increase presentation.nodeGap when labels or links feel crowded, and tune curveness to keep parallel flows visually distinct.

Key fields

visuals:
  category_status_flow_spacious:
    title: Spacious category to status flow
    type: sankey
    presentation:
      type: hierarchy
      nodeGap: 18
      curveness: 0.32
    query:
      type: aggregate
      dimensions:
      - category
      - status
      metrics:
      - order_count
      sort:
      - field: order_count
        direction: desc
      limit: 60

API reference

Kind: chart. Renderer: echarts. Supported result shapes: graph_edges.

Field	Type	Default	Allowed values	Description
`query.dimensions`	`field mapping`	—	—	Groups query results and supplies category or hierarchy labels.
`query.limit`	`integer`	`no limit`	`positive integer`	Caps the number of rows returned to the renderer.
`query.metrics`	`metric mapping`	—	—	Selects governed semantic metrics consumed by the visual shape.
`query.sort`	`sort list`	—	—	Orders query results by a returned field or metric alias.
`presentation.curveness`	`number`	`renderer default`	`number from 0 through 1`	Controls the curvature of graph and flow edges.
`presentation.labels`	`label policy`	`hidden`	`hidden` `automatic` `dense` `always`	Controls deterministic label density, priority, truncation, and tooltip fallback.
`presentation.nodeGap`	`number`	`renderer default`	`non-negative number`	Sets the spacing between hierarchy or flow nodes.
`presentation.orientation`	`string`	`renderer default`	`horizontal` `vertical`	Controls the direction of a compatible visual.

Accessibility. Use meaningful node labels and keep the hierarchy or flow small enough to follow without relying on color alone.