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 metric to size rectangular areas, making dominant categories visible within limited space.

Key fields

visuals:
  category_treemap:
    title: Category revenue treemap
    type: treemap
    query:
      type: aggregate
      dimensions:
      - category
      metrics:
      - revenue
      sort:
      - field: revenue
        direction: desc
      limit: 18
    presentation:
      type: hierarchy

Alternate metric

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

Key fields

visuals:
  state_treemap:
    title: State revenue treemap
    type: treemap
    query:
      type: aggregate
      dimensions:
      - state
      metrics:
      - revenue
      sort:
      - field: revenue
        direction: desc
      limit: 18
    presentation:
      type: hierarchy

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:
      type: hierarchy
      roam: true
      breadcrumb: true
    query:
      type: aggregate
      dimensions:
      - category
      - status
      metrics:
      - revenue
      sort:
      - field: revenue
        direction: desc
      limit: 80

API reference

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

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.breadcrumb`	`boolean`	`false`	`true` `false`	Shows hierarchy navigation context.
`presentation.roam`	`boolean`	`false`	`true` `false`	Allows governed panning and zooming for compatible hierarchy and geographic visuals.

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