---
title: Treemap
description: Hierarchical breakdowns with color-range and patterned variants.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/heatmap
---

# Treemap

Treemaps visualize hierarchical proportional breakdowns — every leaf is a rectangle whose area is proportional to its value. Common use cases: budget allocation across departments, ad-spend across channels, codebase size per language.

> Note: `treemap` is an ApexCharts-specific chart type. Chart.js does not have a native equivalent.

## Basic Example — Marketing budget by channel

:::preview{title="Marketing budget allocation (€K)"}
<x-wirekit-chart
    library="apexcharts"
    type="treemap"
    :labels="[]"
    :datasets="[[
        'label' => 'Channels',
        'data' => [
            ['x' => 'Paid Search',     'y' => 124],
            ['x' => 'Social Ads',      'y' => 98],
            ['x' => 'Content',         'y' => 67],
            ['x' => 'Conferences',     'y' => 52],
            ['x' => 'Email',           'y' => 28],
            ['x' => 'Affiliate',       'y' => 18],
        ],
    ]]"
    aria-label="Marketing budget allocation by channel"
/>
:::

## Multi-dim — Codebase by language

:::preview{title="Codebase size by language (kLOC)"}
<x-wirekit-chart
    library="apexcharts"
    type="treemap"
    :labels="[]"
    :datasets="[[
        'label' => 'Source size',
        'data' => [
            ['x' => 'PHP',        'y' => 142],
            ['x' => 'TypeScript', 'y' => 89],
            ['x' => 'Blade',      'y' => 64],
            ['x' => 'CSS',        'y' => 38],
            ['x' => 'Markdown',   'y' => 28],
            ['x' => 'JSON',       'y' => 12],
        ],
    ]]"
    aria-label="Codebase size by language"
/>
:::

## Top 15 — proportional shares with in-cell labels + distributed colors

A 100% breakdown (top 15 countries by visitor share on a SaaS landing-page).
Cells size by share, label themselves with country + percentage (no hover
required), and use ApexCharts' `distributed: true` plot option so each cell
picks a different theme-palette color instead of the value-shaded
monochrome default. Reach for this shape when the audience needs both the
proportional area AND the explicit values at a glance.

:::preview{title="Top 15 countries by visitor share (last 30 days)"}
<x-wirekit-chart
    library="apexcharts"
    type="treemap"
    :labels="[]"
    :datasets="[[
        'label' => 'Visitor share',
        'data' => [
            ['x' => 'United States · 22.4%', 'y' => 22.4],
            ['x' => 'Germany · 12.6%',       'y' => 12.6],
            ['x' => 'United Kingdom · 8.9%', 'y' => 8.9],
            ['x' => 'France · 6.2%',         'y' => 6.2],
            ['x' => 'Japan · 5.7%',          'y' => 5.7],
            ['x' => 'Canada · 5.3%',         'y' => 5.3],
            ['x' => 'Australia · 4.4%',      'y' => 4.4],
            ['x' => 'Brazil · 4.1%',         'y' => 4.1],
            ['x' => 'Netherlands · 3.9%',    'y' => 3.9],
            ['x' => 'India · 3.6%',          'y' => 3.6],
            ['x' => 'Spain · 3.3%',          'y' => 3.3],
            ['x' => 'Italy · 3.1%',          'y' => 3.1],
            ['x' => 'Sweden · 2.8%',         'y' => 2.8],
            ['x' => 'Poland · 2.6%',         'y' => 2.6],
            ['x' => 'Singapore · 2.5%',      'y' => 2.5],
        ],
    ]]"
    :options="[
        'legend' => ['show' => false],
        'dataLabels' => [
            'enabled' => true,
            'style' => ['fontSize' => '12px', 'fontWeight' => 600],
        ],
        'plotOptions' => [
            'treemap' => [
                'distributed' => true,
                'enableShades' => false,
            ],
        ],
    ]"
    aria-label="Top 15 countries by visitor share on a SaaS landing page over the last 30 days"
/>
:::

## License note

ApexCharts is non-MIT — see [the License section on the Chart overview page](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Heatmap](./heatmap.md) for grid-based 2D categorical visualizations
- [Pie + Donut](./pie-donut.md) for simple proportional breakdowns

## Design Tokens

See [ApexCharts adapter — Design Tokens](/components/charts-apex#design-tokens) for the color, typography, and grid tokens shared across every ApexCharts demo.