Treemap Chart

Displays hierarchical data as nested rectangles. Each rectangle’s area is proportional to its value, using a squarified layout algorithm.

Basic Usage

<ArcadiaTreemapChart TItem="DeptBudget" Data="@data"
                   NameField="@(d => d.Dept)" ValueField="@(d => d.Budget)"
                   Height="400" Width="600" Title="Department Allocation" />

@code {
    record DeptBudget(string Dept, double Budget);

    List<DeptBudget> data = new()
    {
        new("Engineering", 450000), new("Marketing", 180000),
        new("Sales", 220000), new("Operations", 120000),
        new("HR", 80000), new("Design", 95000),
    };
}

Parameters

Parameter	Type	Default	Description
`NameField`	`Func<T, string>`	required	Extracts the category name
`ValueField`	`Func<T, double>`	required	Extracts the numeric value (determines area)
`CellStrokeWidth`	`double`	2	Stroke width for each treemap cell border
`CellStrokeColor`	`string`	`var(--arcadia-color-surface)`	Stroke color for each treemap cell border
`CellLabelColor`	`string`	white	Fill color for the cell name label text

Plus all shared ChartBase parameters.

Events

Event	Type	Description
`OnPointClick`	`EventCallback<PointClickEventArgs<T>>`	Fired when a cell is clicked
`OnSeriesClick`	`EventCallback<int>`	Fired when a series is clicked

Features

Squarified treemap algorithm for optimal aspect ratios
Color coding from the chart palette
Cell labels with name and formatted value
Hover tooltips
PNG/SVG export via toolbar
Screen reader accessible data table