Home Components Support Pricing About Log in

Treemap Chart

BptChartTreeMap

Treemap — packs N rectangles into the plot area, each rectangle's area proportional to its value. Uses the squarified-layout algorithm (Bruls, Huijsen, van Wijk 2000) to keep every rectangle as close to a square as possible — long thin slivers are minimised. Built on the BPT chart foundation — palette-aware, drag-to-rotate in 3D mode, scroll-zoom, and keyboard-accessible via a hidden data table.

Treemap Chart Parameters

Revenue by department
Node	Value
Sales	4200
Engineering	3800
Marketing	1900
Support	1600
Finance	900
HR	720
Legal	540
Facilities	420
IT	380
Other	260

Current Configuration

📋

<BptChartTreeMap Data="@Data"
                 Width="640"
                 Height="440"
                 Title="Revenue by department"
                 OnElementClick="HandleClick" />

@code {
private readonly IReadOnlyList<BptChartTreeMapNode> Data = new BptChartTreeMapNode[]
{
    new("Sales", 4200), new("Engineering", 3800),
    new("Marketing", 1900), new("Support", 1600),
    // …
};

private void HandleClick(BptChartElementEvent e) {
    // Click handler — fires regardless of TooltipMode.
}
}