Charts

TwNightingaleChart

TwNightingaleChart is a Blazor Nightingale (rose) chart: equal-angle wedges whose radius shows each value, suited to cyclical data.

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

TwNightingaleChart gives every value a wedge of the same angle and varies the radius. The area of each wedge is proportional to the value, so large values are not exaggerated.

Traffic by source

Search
Direct
Social
Email
Referral

RAZOR

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

CSHARP

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

Cyclical data

The form suits values that follow a cycle, such as days of the week, where the last value sits beside the first.

Orders by day

RAZOR

<TwChart Title="Orders by day">
    <TwNightingaleChart Data="@_orders" LabelHeader="Day" ValueHeader="Orders" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _orders =
    [
        new("Mon", 120), new("Tue", 135), new("Wed", 150), new("Thu", 170),
        new("Fri", 240), new("Sat", 310), new("Sun", 190)
    ];
}

Many values

As on a pie chart, past eight values the smallest are folded into one wedge named by OtherLabel.

Summary

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

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.