Charts / Treemap

Treemap

Hierarchical data as nested rectangles. Area encodes magnitude.

Dataset

Palette

Data shape

Pass this structure to the :data prop.

data shape

[
    'name'     => 'Annual Budget',
    'children' => [
        ['name' => 'Engineering', 'value' => 420],
        ['name' => 'Marketing',   'value' => 260],
        ['name' => 'Operations',  'value' => 180],
    ],
]

Usage

blade

<x-tayo::chart
    type="treemap"
    :data="$data"
    :height="420"
    colors="default"
/>

Heatmap Gauge