Funnel chart

Use a funnel chart to show ordered stages whose values usually decrease through a process.

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

Funnel presentation supports orientation, labelPosition, align, and sort. Pie and donut geometry fields such as rose, centerLabel, innerRadius, and outerRadius do not apply to stages.

Ordered conversion stages

Use actual sequential stages whose population narrows through one process. Numeric prefixes keep the business sequence explicit and stable.

Key fields

visuals:
  checkout_funnel:
    title: Checkout conversion
    description: Shows progression from product visits to completed orders.
    type: funnel
    presentation:
      type: proportional
      labels:
        density: automatic
        priority:
        - selected
        - anomaly
        - threshold
        maxCharacters: 24
        minimumSpacing: 6
        tooltipFallback: true
    query:
      type: aggregate
      dimensions:
      - stage
      metrics:
      - conversions
      sort:
      - field: stage
        direction: asc

Alternate dimension

Replace status with delivery buckets to reuse the funnel for an ordered operational distribution rather than a lifecycle stage.

Key fields

visuals:
  delivery_funnel:
    title: Delivery speed funnel
    type: funnel
    query:
      type: aggregate
      dimensions:
      - delivery_bucket
      metrics:
      - order_count
      sort:
      - field: delivery_bucket
        direction: asc
    presentation:
      type: proportional

Aligned labels

Set presentation.align: left to anchor the stages, keep labels visible, and use presentation.sort to control the visual stage order independently.

Key fields

visuals:
  status_funnel_left:
    title: Left aligned status funnel
    type: funnel
    presentation:
      type: proportional
      align: left
      sort: ascending
      labels:
        density: automatic
        priority:
        - selected
        - anomaly
        - threshold
        maxCharacters: 20
        minimumSpacing: 6
        tooltipFallback: true
    query:
      type: aggregate
      dimensions:
      - status
      metrics:
      - order_count
      sort:
      - field: order_count
        direction: asc

API reference

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

Field	Type	Default	Allowed values	Description
`query.dimensions`	`field mapping`	—	—	Groups query results and supplies category or hierarchy labels.
`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.align`	`string`	`renderer default`	`left` `center` `right`	Aligns compatible proportional stages.
`presentation.labels`	`label policy`	`hidden`	`hidden` `automatic` `dense` `always`	Controls deterministic label density, priority, truncation, and tooltip fallback.
`presentation.sort`	`string`	`query order`	`ascending` `descending`	Orders compatible proportional stages without changing query semantics.

Accessibility. Use a descriptive title and unit, and do not rely on color alone to distinguish series or values.