Examples
Groups takes PieGroup values (a name and its ChartDataPoint data). Columns fixes the pies per row (by default as many as fit at MinPieWidth), InnerRadiusRatio turns them into donuts and ShowPercent="false" leaves the shares out of the tooltips.
Playground
<MultiPieChart
InnerRadiusRatio="0.5"
Title="Plan mix of Acme Cloud workspaces by region"
Groups="@_regions" />
@code {
// A plan keeps its colour in every pie, whatever its place in the region's list.
private readonly PieGroup[] _regions =
[
new("Europe", [new("Free", 48), new("Pro", 31), new("Team", 15), new("Enterprise", 6)]),
new("North America", [new("Free", 36), new("Pro", 34), new("Team", 19), new("Enterprise", 11)]),
new("Asia Pacific", [new("Free", 57), new("Pro", 26), new("Team", 12), new("Enterprise", 5)]),
new("Latin America", [new("Free", 63), new("Pro", 24), new("Team", 13)]),
];
}API
<MultiPieChart>
DaisyBlazor.ChartsParameters
- Columns int?= null
How many pies per row; null (default) fits as many as the width allows at MinPieWidth each.
- Groups IReadOnlyList<
PieGroup> = []The pies to draw, in order: each group's name titles its pie and its data makes up that pie's whole.
- Height string= "12rem"
CSS height of each pie.
- InnerRadiusRatio double= 0
Inner radius as a fraction of the outer radius (0 = pies; above 0 draws donuts).
- MinPieWidth string= "12rem"
Smallest width of a grid cell when Columns is null, as a CSS length.
- ShowLegend bool= true
Show one legend under the grid, listing each label once.
- ShowPercent bool= true
Show each slice's share of its pie in the tooltips (default true).
- 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.
- Title string= null
Optional heading rendered above the grid; also the grid's accessible name.
- Class string= null
Additional CSS classes merged onto the w-full wrapper.
- Style string= null
Inline styles on the wrapper.