Examples
Root is a HierarchyNode; each parent circle encloses its children, and the legend names the top-level branches.
Padding sets the gap between circles; ShowValues="false" keeps only the names, and the values stay in the tooltips.
Playground
<CirclePackingChart
Title="Deployments this month by team and service"
AspectRatio="1.4"
Root="@_deployments" />
@code {
private readonly HierarchyNode _deployments = new("Deployments", Children:
[
new("Platform", Children: [new("Gateway", 64), new("Auth", 48), new("Scheduler", 22), new("Billing", 18)]),
new("Product", Children: [new("Web app", 96), new("Mobile API", 41), new("Search", 27)]),
new("Data", Children: [new("Pipelines", 38), new("Warehouse", 15), new("Exports", 9)]),
]);
}API
<CirclePackingChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- GroupColors IReadOnlyDictionary<
string, string> = nullOptional colour per top-level branch name (any CSS colour); other branches cycle through the theme palette.
- Padding double= 3
Gap between sibling circles and between a parent and its children, in chart units.
- Root HierarchyNode= null
The tree to draw. Leaves are sized by Value; a parent is the sum of its children and encloses them.
- 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 each leaf's value under its name when the circle is large 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} projects".
- 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.