Tree

Use a tree to show hierarchical paths when parent-child structure should remain explicit.

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

Two-level hierarchy

Order dimensions from parent to child and use the measure to annotate the resulting state-to-status hierarchy.

Key fields

visuals:
  state_status_tree:
    title: State and status tree
    description: Shows customer state and order status as a hierarchy.
    type: tree
    query:
      dimensions:
        state: orders.state
        status: orders.status
      measures:
        order_count: null
      sort:
        - field: value
          direction: desc
      limit: 80

Alternate hierarchy

Replace the parent dimension with category to present a different two-level hierarchy using the same tree shape.

Key fields

visuals:
  category_status_tree:
    title: Category and status tree
    type: tree
    query:
      dimensions:
        category: orders.category
        status: orders.status
      measures:
        order_count: null
      sort:
        - field: value
          direction: desc
      limit: 80

Three-level hierarchy

Add state as an intermediate level, use initial_depth to limit the initial expansion, and set orient to fit the available reading direction.

Key fields

visuals:
  category_state_status_tree:
    title: Category, state, and status tree
    type: tree
    presentation:
      orientation: vertical
      initial_depth: 2
    query:
      dimensions:
        category: orders.category
        state: orders.state
        status: orders.status
      measures:
        order_count: null
      sort:
        - field: value
          direction: desc
      limit: 120

API reference

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

Field	Type	Default	Allowed values	Description
`query.dimensions`	`field mapping`	—	—	Groups query results and supplies category, hierarchy, matrix, graph, or geographic labels.
`query.limit`	`integer`	`no limit`	`positive integer`	Caps the number of rows returned to the renderer.
`query.measures`	`measure mapping`	—	—	Selects the governed semantic measures consumed by the visual shape.
`query.sort`	`sort list`	—	—	Orders query results by a returned field or measure alias.
`presentation.initial_depth`	`integer`	`-1`	`-1 or greater`	Sets the deepest hierarchy level expanded initially; -1 expands all levels.
`presentation.orientation`	`string`	`renderer default`	`horizontal` `vertical`	Controls the direction of tree or Sankey layout.

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