Examples
Root is a HierarchyNode; the root fills the first column and each level splits it further. Bands show their name and value when they fit.
Horizontal="false" puts the root on top with one row per level.
Drilldown="true" with Focus="Europe" set up front: the chart starts on that branch. Click a band with children to drill further; the first band and the breadcrumb go back up. Clicks need an interactive render mode.
Focus: Europe
Playground
<IcicleChart
ValueFormat="{0:N0} GB"
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
<IcicleChart>
DaisyBlazor.ChartsParameters
- 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> = nullOptional colour per top-level branch name (any CSS colour); other branches cycle through the theme palette.
- Horizontal bool= true
Put the root on the left with one column per level (the default); false puts it on top with one row per level.
- Root HierarchyNode= null
The tree to draw. Leaves are sized by Value; a parent is the sum of its children. The root is the first band.
- 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 node's value under its name when the band is tall enough.
- 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.