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

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

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.

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 and apexcharts.com/license for the full terms.

Design Tokens

See ApexCharts adapter — Design Tokens for the color, typography, and grid tokens shared across every ApexCharts demo.

Was this page helpful?

Thank you for your feedback!

What was missing? (optional)

Voting requires cookies or local storage. What we store