Charts

TwIconChart

TwIconChart is a Blazor icon chart and pictogram: values shown as rows of repeated icons, or as one icon sized by each value.

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

TwIconChart draws values with any Icon from the library. By default each value becomes a row of repeated icons, a pictogram, and the legend states what one icon stands for.

Team size by office

1 icon = 5

RAZOR

<TwChart Title="Team size by office">
    <TwIconChart Data="@_offices" Icon="Icon.Person" LabelHeader="Office" ValueHeader="People" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _offices =
    [
        new("London", 48),
        new("Leeds", 22),
        new("Bristol", 31)
    ];
}

Unit value

A round amount is chosen so the largest value uses about ten icons. Set UnitValue to decide what one icon is worth.

Team size by office

1 icon = 2

RAZOR

<TwChart Title="Team size by office">
    <TwIconChart Data="@_offices" Icon="Icon.Person" UnitValue="2" Height="ChartHeight.Small" />
</TwChart>

Sized icons

Set Mode to IconChartMode.Size to draw one icon per value, with its area following the value.

Team size by office

RAZOR

<TwChart Title="Team size by office">
    <TwIconChart Data="@_offices" Icon="Icon.Person" Mode="IconChartMode.Size" Height="ChartHeight.Small" />
</TwChart>

Accessibility

The icons are decorative and hidden from assistive technology. The values are stated by the data points, tooltips and table view.

Summary

Tooltips and the table view give the value of each category.

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.

TwIconChart

Basic usage

Unit value

Sized icons

Accessibility

Summary

Shared features

Keyboard navigation