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"
/>