Charts

TwGaugeChart

TwGaugeChart is a Blazor circular gauge: an arc filled in proportion to one value between a minimum and a maximum.

Last updated 13 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

TwGaugeChart fills an arc in proportion to a single Value and prints it in the middle. Label says what it measures.

Storage used

RAZOR

<TwChart Title="Storage used">
    <TwGaugeChart Value="68" Label="Percent used" />
</TwChart>

Range

The arc runs from Min (0 by default) to Max (100 by default). A value outside the range fills or empties the arc but is still printed as given.

Response time

RAZOR

<TwChart Title="Response time">
    <TwGaugeChart Value="340" Min="0" Max="500" Label="Milliseconds" />
</TwChart>

Size and format

Height sets how large the gauge may grow and ValueFormat formats the figure.

CPU

Memory

RAZOR

<div class="grid grid-cols-2 gap-8">
    <TwChart Title="CPU">
        <TwGaugeChart Value="0.42" Max="1" Label="Load" ValueFormat="0%" Height="ChartHeight.Small" />
    </TwChart>
    <TwChart Title="Memory">
        <TwGaugeChart Value="0.87" Max="1" Label="In use" ValueFormat="0%" Height="ChartHeight.Small" />
    </TwChart>
</div>

Summary

Tooltips and the table view give the value of the gauge and the range it is measured against.

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.

TwGaugeChart

Basic usage

Range

Size and format

Summary

Shared features

Keyboard navigation