TreemapChart: Blazor treemap chart component

Examples

Basic

Root is a HierarchyNode: leaves carry a Value, parents add up their Children. Tiles show their name and value when they fit; hover any tile for its full path.

Storage by team and project (GB)

website/Examples/Charts/TreemapChartBasicExample.razor Source

Tiling

Tile chooses how each parent is cut (here SliceDice, which alternates rows and columns by level); ValueFormat sets the unit.

website/Examples/Charts/TreemapChartTileExample.razor Source

Strip

Tile="TreemapTile.Strip" fills rows in the children's order (largest first), each row taking the next tile while that keeps its tiles closer to square, so neighbours stay neighbours.

website/Examples/Charts/TreemapChartStripExample.razor Source

Drilldown="true" makes every parent a button (click, or Tab then Enter): the chart re-roots on it at full size, colours stay those of its top-level branch, and the breadcrumb above goes back up. @bind-Focus sets or follows the drilled node as a path like "Platform/api" (a '/' inside a name is written "\/"); OnNodeClick reports any clicked node. Clicks need an interactive render mode; static rendering draws the Focus node.

Acme Cloud storage by team, service and data set (GB)

Focus: (whole tree)

website/Examples/Charts/TreemapChartDrilldownExample.razor Source

Playground

Storage by team and project (GB)

Tile TreemapTile

Padding

ShowValues

ValueFormat

Drilldown

Focus

Title

ShowTitle

AspectRatio

RowHeight

<TreemapChart
              Title="Storage by team and project (GB)"
              Root="@_storage" />

@code {
    private readonly HierarchyNode _storage = new("Storage", Children:
    [
        new("Platform", Children: [new("Logs", 420), new("Backups", 310), new("Images", 120)]),
        new("Product", Children: [new("Uploads", 380), new("Thumbnails", 90), new("Exports", 60)]),
        new("Data", Children: [new("Warehouse", 520), new("Snapshots", 210)]),
        new("Support", Children: [new("Attachments", 70), new("Recordings", 45)]),
    ]);
}

API

<TreemapChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Drilldown bool
= false
Click (or Enter on) a node with children to show only that branch, at full size; a leaf below the first level opens its parent, so a treemap whose leaves cover their parents still drills. A breadcrumb above the chart goes back up. Needs an interactive render mode: under static rendering the chart shows Focus (or the whole tree) with no buttons.
Focus string
= null
The node drawn as the root, as the names below the root joined by '/', e.g. "Platform/Logs"; null for the whole tree. A '/' inside a name is written "\/" and a backslash "\\", so the node "A / B" under "CI/CD" is "CI\/CD/A \/ B" (FocusChanged reports paths the same way). Bind it with @bind-Focus to set or follow the drilled node. An unknown path shows the whole tree and a leaf shows its parent. Applies under static rendering too.
GroupColors IReadOnlyDictionary<string, string>
= null
Optional colour per top-level branch name (any CSS colour); other branches cycle through the theme palette.
Padding double
= 2
Gap between sibling tiles and inside each parent frame, in chart units.
Root HierarchyNode
= null
The tree to draw. Leaves are sized by Value; a parent is the sum of its children. The root itself is not drawn.
RowHeight double?
= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
ShowTitle bool
= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
ShowValues bool
= true
Print each tile's value under its name, and each parent's total in its header, when they fit.
Tile TreemapTile
= TreemapTile.Squarify
How each parent is cut into tiles.
Title string
= null
Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat string
= "{0:#,0.##}"
Format string for values in labels and tooltips, e.g. "{0:N0} GB".
Width string
= "100%"
CSS width of the chart wrapper.
Class string
= null
Additional CSS classes merged onto the w-full wrapper.
Style string
= null
Inline styles appended after the width on the wrapper.

Name	Type	Default	Description
AspectRatio	double	1.78	Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Drilldown	bool	false	Click (or Enter on) a node with children to show only that branch, at full size; a leaf below the first level opens its parent, so a treemap whose leaves cover their parents still drills. A breadcrumb above the chart goes back up. Needs an interactive render mode: under static rendering the chart shows Focus (or the whole tree) with no buttons.
Focus	string	null	The node drawn as the root, as the names below the root joined by '/', e.g. "Platform/Logs"; null for the whole tree. A '/' inside a name is written "\/" and a backslash "\\", so the node "A / B" under "CI/CD" is "CI\/CD/A \/ B" (FocusChanged reports paths the same way). Bind it with @bind-Focus to set or follow the drilled node. An unknown path shows the whole tree and a leaf shows its parent. Applies under static rendering too.
GroupColors	IReadOnlyDictionary<string, string>	null	Optional colour per top-level branch name (any CSS colour); other branches cycle through the theme palette.
Padding	double	2	Gap between sibling tiles and inside each parent frame, in chart units.
Root	HierarchyNode	null	The tree to draw. Leaves are sized by Value; a parent is the sum of its children. The root itself is not drawn.
RowHeight	double?	null	Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
ShowTitle	bool	true	Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
ShowValues	bool	true	Print each tile's value under its name, and each parent's total in its header, when they fit.
Tile	TreemapTile	TreemapTile.Squarify	How each parent is cut into tiles.
Title	string	null	Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat	string	"{0:#,0.##}"	Format string for values in labels and tooltips, e.g. "{0:N0} GB".
Width	string	"100%"	CSS width of the chart wrapper.
Class	string	null	Additional CSS classes merged onto the w-full wrapper.
Style	string	null	Inline styles appended after the width on the wrapper.

Events

FocusChanged EventCallback<string>
Raised with the new Focus when a click or the breadcrumb moves it (interactive render modes only).
OnNodeClick EventCallback<HierarchyNode>
Raised with the clicked node of Root, leaves included, when set; nodes become buttons even without Drilldown. Needs an interactive render mode.

Name	Type	Description
FocusChanged	EventCallback<string>	Raised with the new Focus when a click or the breadcrumb moves it (interactive render modes only).
OnNodeClick	EventCallback<HierarchyNode>	Raised with the clicked node of Root, leaves included, when set; nodes become buttons even without Drilldown. Needs an interactive render mode.

TreemapChart