Examples
Root is a HierarchyNode; the centre disc shows its name and total, and each ring is one level deeper. Arcs too thin for a name keep it in their tooltip.
Any depth works: branches may stop at different levels. GroupColors maps a top-level branch to any CSS colour, and ValueFormat sets the unit in tooltips.
Drilldown="true": click (or Tab then Enter on) an arc with children to make it the centre, at full circle; click the centre or the breadcrumb to go back up. @bind-Focus follows the drilled node. Clicks need an interactive render mode.
Focus: (whole tree)
Playground
<SunburstChart
Title="Support tickets by product area and topic"
AspectRatio="1.4"
Root="@_tickets" />
@code {
private readonly HierarchyNode _tickets = new("Tickets", Children:
[
new("Billing", Children: [new("Invoices", 140), new("Plan change", 95), new("Refunds", 40)]),
new("Deployments", Children: [new("Failed build", 180), new("Rollback", 70), new("Domains", 55)]),
new("Storage", Children: [new("Quota", 120), new("Backups", 60)]),
new("Access", Children: [new("SSO", 110), new("Invites", 75), new("API keys", 50)]),
]);
}API
<SunburstChart>
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.
- Root HierarchyNode= null
The tree to draw. Leaves are sized by Value; a parent is the sum of its children. The root is the centre disc.
- 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.
- ShowLegend bool= true
Show a colour key for the top-level branches under the chart.
- 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 the root's total in the centre disc.
- 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 the centre and in tooltips, e.g. "{0:N0} requests".
- 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.