Charts

TwRadarChart

TwRadarChart is a Blazor radar (spider) chart that compares a few items across several attributes on spokes around a center.

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

TwRadarChart gives each category a spoke around a center and draws each series as a shape joining its values. It needs at least three categories. All spokes share one scale starting at zero, so use values in the same unit, such as scores.

Laptop comparisonScore out of 10

RAZOR

<TwChart Title="Laptop comparison" Description="Score out of 10">
    <TwRadarChart Categories="@_attributes" Series="@_laptops" />
</TwChart>

CSHARP

@code {
    private readonly string[] _attributes = ["Battery", "Display", "Speed", "Weight", "Price"];
    
    private readonly ChartSeries[] _laptops =
    [
        new("Aero 13", [9, 7, 6, 9, 5]),
        new("Titan 16", [5, 9, 9, 4, 6])
    ];
}

Single series

With one series the chart shows a profile: where an item is strong and where it is weak.

Aero 13

RAZOR

<TwChart Title="Aero 13">
    <TwRadarChart Categories="@_attributes" Series="@_aero" />
</TwChart>

CSHARP

@code {
    private readonly ChartSeries[] _aero = [new("Aero 13", [9, 7, 6, 9, 5])];
}

Size

Radial charts are square. Height sets how wide the square may grow.

Laptop comparison

RAZOR

<TwChart Title="Laptop comparison">
    <TwRadarChart Categories="@_attributes" Series="@_laptops" Height="ChartHeight.Large" />
</TwChart>

When to use

Keep to two or three series, because overlapping shapes hide each other. For attributes in different units use TwParallelCoordinatesChart, which gives each its own scale.

Summary

Tooltips and the table view give the value of every series for 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.

TwRadarChart

Basic usage

Single series

Size

When to use

Summary

Shared features

Keyboard navigation