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 and 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',  'y' => 22.4],
            ['x' => 'Germany',        'y' => 12.6],
            ['x' => 'United Kingdom', 'y' => 8.9],
            ['x' => 'France',         'y' => 6.2],
            ['x' => 'Japan',          'y' => 5.7],
            ['x' => 'Canada',         'y' => 5.3],
            ['x' => 'Australia',      'y' => 4.4],
            ['x' => 'Brazil',         'y' => 4.1],
            ['x' => 'Netherlands',    'y' => 3.9],
            ['x' => 'India',          'y' => 3.6],
            ['x' => 'Spain',          'y' => 3.3],
            ['x' => 'Italy',          'y' => 3.1],
            ['x' => 'Sweden',         'y' => 2.8],
            ['x' => 'Poland',         'y' => 2.6],
            ['x' => 'Singapore',      'y' => 2.5],
        ],
    ]]"
    valueDecimals="1"
    valueSuffix="%"
    :options="[
        'legend' => ['show' => false],
        'dataLabels' => [
            'wkShowValue' => 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"
/>

Values in the cells

'dataLabels' => ['wkShowValue' => true] in options labels each cell with its name and, on the line below, its value. The value is written as the tooltip writes it: valueDecimals, valuePrefix and valueSuffix apply, in your application's locale, so valueDecimals="1" and valueSuffix="%" read 22.4%, and 22,4% on a German page. The option turns the labels on.

ApexCharts labels only the cells with room for the text; the rest show their name and value in the tooltip. With 'plotOptions' => ['treemap' => ['dataLabels' => ['format' => 'truncate']]] the name and the value share one line, separated by a middle dot. Keep the value out of the x of a data point: the tooltip shows x as its heading and the value below it.

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.