Charts

TwPieChart

TwPieChart is a Blazor pie chart for parts of a whole. Set an inner radius for a donut chart, or draw it as a semicircle.

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

TwPieChart sizes each slice by its share of the whole. Pass a list of ChartValue. Slices large enough to hold a label show their share, and the legend names every slice.

Traffic by source

Search
Direct
Social
Email
Referral

RAZOR

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

CSHARP

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

Donut

Set InnerRadius between 0 and 0.9 to open a hole in the middle, and CenterText to put a headline figure in it.

Traffic by source

Search
Direct
Social
Email
Referral

RAZOR

<TwChart Title="Traffic by source">
    <TwPieChart Data="@_sources" InnerRadius="0.6" CenterText="1,000" />
</TwChart>

Semicircle

Set Semicircle for a half donut, which takes less vertical space.

Traffic by source

Search
Direct
Social
Email
Referral

RAZOR

<TwChart Title="Traffic by source">
    <TwPieChart Data="@_sources" InnerRadius="0.6" Semicircle="true" CenterText="1,000" />
</TwChart>

Many values

A pie works for a handful of parts. Past eight values, the smallest are folded into one slice named by OtherLabel so a color is never reused. The table view still lists every value.

Visits by country

United Kingdom
United States
Germany
France
Spain
Italy
Canada
Rest of world

RAZOR

<TwChart Title="Visits by country">
    <TwPieChart Data="@_countries" OtherLabel="Rest of world" ShowPercentages="false" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _countries =
    [
        new("United Kingdom", 320), new("United States", 280), new("Germany", 150), new("France", 120),
        new("Spain", 90), new("Italy", 70), new("Canada", 60), new("Japan", 40), new("Brazil", 30), new("India", 20)
    ];
}

Labels

ShowPercentages turns the share labels off. LabelHeader and ValueHeader name the table columns, and ValueHeader also names the value in tooltips.

Summary

Tooltips and the table view give the value of each slice. 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.

TwPieChart

Basic usage

Donut

Semicircle

Many values

Labels

Summary

Shared features

Keyboard navigation