Charts

TwWaffleChart

TwWaffleChart is a Blazor waffle chart: a ten by ten grid of squares, each worth one percent, colored by each value's share.

Last updated 18 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

TwWaffleChart shows parts of a whole as a ten by ten grid where each square is one percent. Counting squares is easier than judging angles, so small differences read more reliably than on a pie.

Traffic by source

Search (43%)
Direct (26%)
Social (17%)
Email (9%)
Referral (5%)

RAZOR

<TwChart Title="Traffic by source">
    <TwWaffleChart Data="@_sources" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _sources =
    [
        new("Search", 430),
        new("Direct", 260),
        new("Social", 170),
        new("Email", 90),
        new("Referral", 50)
    ];
}

Two parts

It is at its clearest for a single share against the rest.

Survey response rate

Responded (62%)
No response (38%)

RAZOR

<TwChart Title="Survey response rate">
    <TwWaffleChart Data="@_responses" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _responses =
    [
        new("Responded", 62),
        new("No response", 38)
    ];
}

Rounding

Squares are shared out so the grid is always full, even when the shares do not round to whole percentages. The legend states each exact share.

Summary

Tooltips and the table view give the value of each category. Tooltips also give its share of the whole.

Shared features

The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See TwChart for those options.

The plot is a single Tab stop. Each data point is announced with its series and value as focus reaches it, and the table view presents the same data without the plot.

Key	What it does
`Tab`	Moves focus into the plot, onto the data point last visited.
`Arrow Right` or `Arrow Down`	Moves to the next data point.
`Arrow Left` or `Arrow Up`	Moves to the previous data point.
`Home` or `End`	Moves to the first or last data point.
`Escape`	Hides the tooltip of the focused data point.
`Enter` or `Space`	On a legend item: shows or hides that series. On the table button: switches between the chart and its data table.