# Treemap Chart

Source: https://lumeo.nativ.sh/components/charts/treemap

# Treemap Chart

Visualize hierarchical data as nested rectangles. The area of each rectangle is proportional to its value, making it easy to spot the largest categories.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo.Charts

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<TreemapChart />

Preview Code

Department Budget Treemap

Annual operating budget broken down by department and sub-team. Nested children show how each department's allocation is split internally.

Preview Code

Disk Usage

Filesystem usage breakdown by directory. A flat (non-hierarchical) treemap quickly surfaces the largest consumers of storage space.

Preview Code

Product Revenue Mix

Revenue by product category and individual SKU. Data labels enabled so each tile shows its name without hovering.

Preview Code

Org Headcount by Business Unit

Headcount by business unit with a violet-to-indigo palette override and Toolbox for screenshot export.

Preview Code

Loading state

Simulate loading

Hold skeleton open

Duration: 2s 

Cycle: 1400 ms 

Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.

## API Reference

### TreemapChart

Property

Type

Default

Description

Data

List<TreemapData>

\[\]

Hierarchical data with Name, Value, and optional Children.

ShowLegend

bool

true

Shows or hides the chart legend.

Colors

List<string>?

null

Custom color palette.

IsLoading

bool

false

When true, renders a shape-matched loading skeleton in place of the chart. Bind to your async fetch state.

ShowLoadingSkeleton

bool

true

Set to false to opt out of the skeleton (chart area stays empty while IsLoading is true).

SkeletonKind

ChartSkeletonKind

(chart default)

Override the skeleton silhouette (Bars, Line, Area, Pie, Scatter, Grid, Generic).

SkeletonStyle

ChartSkeletonStyle

Phantom

Phantom renders the real chart with placeholder data and morphs to real data via ECharts animation. Silhouette falls back to the legacy SVG skeleton overlay.

ShowLoadingLabel

bool

true

Shows a small "Loading…" pill in the top-right corner whenever `IsLoading` is true. Layered on top of any `SkeletonStyle`. Set to false for bare visuals. **(rc.18)**

LoadingText

string?

"Loading…"

Label rendered next to the spinner inside the loading pill. Set to empty to show the spinner alone. **(rc.18)**

Width

string

"100%"

Chart container width as a CSS length.

Height

string

"350px"

Chart container height as a CSS length.

Theme

string?

null

ECharts theme name applied to this chart instance.

ColorPalette

List<string>?

null

Named palette used to seed tile colors.

ShowTooltip

bool

true

Shows or hides hover tooltips on treemap tiles.

ShowDataLabels

bool

false

Show value labels on tiles.

LabelPosition

string

"inside"

Position of data labels relative to each tile.

LabelFormat

string?

null

ECharts label formatter template string.

DataZoom

bool

false

Enable interactive zoom controls.

Toolbox

bool

false

Show ECharts toolbox with save, restore, and zoom utilities.

AnimationDuration

int?

null

Animation length in milliseconds when rendering.

AnimationEasing

string?

null

ECharts easing function name applied to animations.

PhantomCycleMs

int

1400

Phantom-mode refresh interval in milliseconds while loading.