LinearGaugeChart: Blazor linear gauge chart component

Examples

Basic

Bands are painted on the track, Marker draws the target, and ValueFormat adds the unit.

Storage used

website/Examples/Charts/LinearGaugeChartBasicExample.razor Source

Vertical

Horizontal="false" runs the scale bottom to top. Give it an AspectRatio below 1 and a narrow Width: a vertical gauge sizes its text from its width.

Build minutes

API calls

website/Examples/Charts/LinearGaugeChartVerticalExample.razor Source

Playground

Storage used

Value

Min

Max

Marker

Horizontal

Color

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<LinearGaugeChart
                  Value="412"
                  Max="500"
                  Marker="450"
                  ValueFormat="{0:N0} GB"
                  Title="Storage used"
                  Bands="@_bands" />

@code {
    private readonly GaugeBand[] _bands =
    [
        new(400, 450, ChartPalette.FromColor(Color.Warning), "Nearly full"),
        new(450, 500, ChartPalette.FromColor(Color.Error), "Over the alert level"),
    ];
}

API

<LinearGaugeChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 4
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Bands IReadOnlyList<GaugeBand>
= null
Optional coloured ranges painted on the track.
Color string
= null
Any CSS colour for the filled bar, such as var(--color-success); FromColor() maps a Color value to its theme token. Defaults to the theme's primary colour.
Horizontal bool
= true
Run the scale left to right (the default); false runs it bottom to top. A vertical gauge sizes its text from its width, so give it an AspectRatio below 1 and a narrow Width.
Marker double?
= null
Optional target value, drawn as a line across the track.
Max double
= 100
End of the scale; must be greater than Min, or nothing is drawn.
Min double
= 0
Start of the scale.
RowHeight double?
= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
ShowTitle bool
= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
Title string
= null
Optional heading rendered above the chart; it is also the chart's accessible name.
Value double
= 0
The value to show. The pointer is clamped to [Min, Max]; the printed value is not.
ValueFormat string
= "{0:#,0.##}"
Format string for the value and ticks, e.g. "{0:N0} GB".
Width string
= "100%"
CSS width of the chart wrapper.
Class string
= null
Additional CSS classes merged onto the w-full wrapper.
Style string
= null
Inline styles appended after the width on the wrapper.

Name	Type	Default	Description
AspectRatio	double	4	Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Bands	IReadOnlyList<GaugeBand>	null	Optional coloured ranges painted on the track.
Color	string	null	Any CSS colour for the filled bar, such as var(--color-success); FromColor() maps a Color value to its theme token. Defaults to the theme's primary colour.
Horizontal	bool	true	Run the scale left to right (the default); false runs it bottom to top. A vertical gauge sizes its text from its width, so give it an AspectRatio below 1 and a narrow Width.
Marker	double?	null	Optional target value, drawn as a line across the track.
Max	double	100	End of the scale; must be greater than Min, or nothing is drawn.
Min	double	0	Start of the scale.
RowHeight	double?	null	Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
ShowTitle	bool	true	Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
Title	string	null	Optional heading rendered above the chart; it is also the chart's accessible name.
Value	double	0	The value to show. The pointer is clamped to [Min, Max]; the printed value is not.
ValueFormat	string	"{0:#,0.##}"	Format string for the value and ticks, e.g. "{0:N0} GB".
Width	string	"100%"	CSS width of the chart wrapper.
Class	string	null	Additional CSS classes merged onto the w-full wrapper.
Style	string	null	Inline styles appended after the width on the wrapper.