Examples · Treemap

Treemap chart examples

A city budget has departments, and each department pays for several services. This treemap shows both levels: color identifies the department, and tile area represents each service’s budget. Open a group to inspect its items.

When to use it

A budget with departments and spending items, all measured in the same currency
A time log where projects contain tasks and every value measures hours
A snapshot of holdings grouped by asset class, with one valuation date and unit

Not the right shape?

Use a bar chart to compare nearly equal values precisely. Use a line or area chart for change over time. A treemap needs positive values that belong to one total; unrelated measures do not make a meaningful whole.

Real-world examples

Where a team spent its week

Design and engineering contain different tasks. The areas show recorded hours, including meetings, rather than implying every hour produced a deliverable.

Open in maker with this data

View the spec

{
  "type": "treemap",
  "theme": "editorial",
  "title": "A team’s recorded week",
  "source": "Illustrative data · hours",
  "data": {
    "labels": [],
    "series": [],
    "nodes": [
      {
        "id": "g0",
        "label": "Design"
      },
      {
        "id": "i0",
        "parentId": "g0",
        "label": "Research",
        "value": 14
      },
      {
        "id": "i1",
        "parentId": "g0",
        "label": "Prototypes",
        "value": 22
      },
      {
        "id": "g1",
        "label": "Engineering"
      },
      {
        "id": "i2",
        "parentId": "g1",
        "label": "Features",
        "value": 38
      },
      {
        "id": "i3",
        "parentId": "g1",
        "label": "Maintenance",
        "value": 18
      },
      {
        "id": "g2",
        "label": "Coordination"
      },
      {
        "id": "i4",
        "parentId": "g2",
        "label": "Meetings",
        "value": 8
      }
    ]
  }
}

A portfolio at one moment

The groups show asset classes and the items show holdings at the same valuation date. This fictional allocation illustrates composition, not an investment recommendation.

Open in maker with this data

View the spec

{
  "type": "treemap",
  "theme": "editorial",
  "title": "Portfolio composition",
  "source": "Illustrative data · value units",
  "data": {
    "labels": [],
    "series": [],
    "nodes": [
      {
        "id": "g0",
        "label": "Equities"
      },
      {
        "id": "i0",
        "parentId": "g0",
        "label": "Domestic fund",
        "value": 42
      },
      {
        "id": "i1",
        "parentId": "g0",
        "label": "International fund",
        "value": 18
      },
      {
        "id": "g1",
        "label": "Bonds"
      },
      {
        "id": "i2",
        "parentId": "g1",
        "label": "Government bonds",
        "value": 25
      },
      {
        "id": "i3",
        "parentId": "g1",
        "label": "Corporate bonds",
        "value": 10
      },
      {
        "id": "g2",
        "label": "Cash"
      },
      {
        "id": "i4",
        "parentId": "g2",
        "label": "Deposit",
        "value": 5
      }
    ]
  }
}

Open this chart in a maker Treemap maker from scratch

Questions people ask

What does each rectangle mean?

Its area represents the item’s share of the total. Its color identifies the group. Hover, tap or use arrow keys for the exact value and both shares.

Can I change the example’s numbers?

Open the example in the treemap maker. Its Group, Item and Value cells arrive with the chart, ready to edit.

Does a missing value count as zero?

No. A missing item has no area, stays in the accessible table and reads No data in its tooltip. Shares explain how many items have no data.