Treemap

Use a treemap to compare part-to-whole values when rectangular area communicates magnitude.

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

Basic

Use one categorical dimension and one measure to size rectangular areas, making dominant categories visible within limited space.

Key fields

visuals:
  category_treemap:
    title: Category revenue treemap
    type: treemap
    query:
      dimensions:
        category: orders.category
      measures:
        revenue: null
      sort:
        - field: value
          direction: desc
      limit: 18

Alternate measure

Replace the dimension and measure to compare revenue by state without changing the category-value shape.

Key fields

visuals:
  state_treemap:
    title: State revenue treemap
    type: treemap
    query:
      dimensions:
        state: orders.state
      measures:
        revenue: null
      sort:
        - field: value
          direction: desc
      limit: 18

Navigable hierarchy

Enable breadcrumb and roam when readers should navigate into dense or nested rectangles instead of viewing a fixed overview.

Key fields

visuals:
  category_treemap_roam:
    title: Navigable category and status treemap
    type: treemap
    presentation:
      roam: true
      breadcrumb: true
    query:
      dimensions:
        category: orders.category
        status: orders.status
      measures:
        revenue: null
      sort:
        - field: value
          direction: desc
      limit: 80

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.breadcrumb`	`boolean`	`false`	`true` `false`	Shows the treemap hierarchy breadcrumb.
`presentation.roam`	`boolean`	`false`	`true` `false`	Enables supported pan, zoom, or hierarchy navigation interactions.

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