Treemap

Compare hierarchical values as proportional nested tiles.

Chart ID: treemap. Independent import: @revolist/charts/treemap.

Live example

Loading chart…

Reading the chart

Compare weights through nested rectangle areas. Parent regions contain their descendants; a hierarchy path gives each nested branch its identity.

Data requirements

Supply semantic hierarchy paths and numeric weights. Treemap and sunburst can render complete trees; icicle and circle packing use their supported hierarchy projections. Hierarchy fields, IDs and labels must describe the same paths.

Use non-negative values for this chart. Negative values are rejected; explicit nulls represent missing observations.

The roles below describe the chart's data contract. Generic category/value roles resolve from the dataset; explicitly bind specialized numeric roles as shown in the complete example.

Data role	Field count
hierarchy	1 or more
weight	1

Download the complete sample data and settings (JSON). See Data & Configuration for mapping, null values, updates and lifecycle rules.

Create this chart

Install the package using the installation guide, give the host an explicit height, and call createTreemapChart after the host mounts. This factory fixes the chart type to treemap.

<div id="chart" style="width: 100%; height: 450px;"></div>

Complete runnable TypeScript example with sample data

import { createTreemapChart } from '@revolist/charts/treemap';

const container = document.getElementById('chart')!;
const chart = await createTreemapChart({
  container,
  "data": [
    {
      "id": 1,
      "region": "Europe",
      "country": "Portugal",
      "city": "Lisbon",
      "value": 22
    },
    {
      "id": 2,
      "region": "Europe",
      "country": "Portugal",
      "city": "Porto",
      "value": 12
    },
    {
      "id": 3,
      "region": "Europe",
      "country": "Spain",
      "city": "Madrid",
      "value": 18
    },
    {
      "id": 4,
      "region": "Europe",
      "country": "Spain",
      "city": "Barcelona",
      "value": 14
    },
    {
      "id": 5,
      "region": "Americas",
      "country": "USA",
      "city": "Boston",
      "value": 20
    },
    {
      "id": 6,
      "region": "Americas",
      "country": "USA",
      "city": "Austin",
      "value": 15
    },
    {
      "id": 7,
      "region": "Americas",
      "country": "Canada",
      "city": "Toronto",
      "value": 16
    },
    {
      "id": 8,
      "region": "Americas",
      "country": "Canada",
      "city": "Vancouver",
      "value": 10
    }
  ],
  "mapping": {
    "category": {
      "field": "id",
      "path": [
        "region",
        "country",
        "city"
      ]
    },
    "series": [
      {
        "field": "value",
        "label": "Revenue"
      }
    ]
  },
  "presentation": {
    "dataLabels": false
  }
});

// When the host unmounts:
// chart.destroy();

Await updates before reading a snapshot or exporting. Call chart.destroy() when the host unmounts. See the live catalog to interact with this type.

Supported options

Set these fields in chartOptions. The option schema validates supported keys, ranges and choices; updating chartOptions replaces that authored object.

Option	Default	Accepted values
markOpacity	1	0.2 to 1; step 0.05

Titles, legends, theme and labels belong to presentation or the corresponding top-level setting. Axis, color, navigation and interaction support depends on the selected chart; see Data & Configuration.

Related charts

• Sunburst — Explore the current hierarchy level as proportional radial sectors.
• Icicle — Explore hierarchy through proportional stacked rectangles.
• Circle packing — Explore hierarchy through proportional nested circles.
• Organization chart — Show connected parent and child cards.

Charts overview · Installation · Data & Configuration