Examples
The items fill the grid row by row in the order given; the legend shows each share.
Total larger than the sum leaves the remaining cells empty; Rows and Columns change the grid (5 × 20 here).
Playground
<WaffleChart
ValueFormat="{0:N0} seats"
Title="Seats by status"
Data="@_seats" />
@code {
private readonly ChartDataPoint[] _seats =
[
new("Active", 412),
new("Invited", 96),
new("Suspended", 22),
new("Unassigned", 70),
];
}API
<WaffleChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- Columns int= 10
Number of cells per row.
- Data IReadOnlyList<
ChartDataPoint> = []The parts of the whole, filled in this order. Only positive values count; a point's Color overrides the palette.
- EmptyColor string= "var(--color-base-content)"
CSS colour of the empty cells (drawn faint).
- Gap double= 6
Gap between cells, in chart units.
- 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.
- Rows int= 10
Number of rows of cells.
- ShowLegend bool= true
Show each part's colour and share under the grid.
- 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 chart; it is also the chart's accessible name.
- Total double?= null
The whole. When it is larger than the sum of the items, the remaining cells stay empty; by default the items fill the grid.
- ValueFormat string= "{0:#,0.##}"
Format string for values in tooltips.
- 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.