GaugeChart: Blazor gauge chart component

Examples

Bands and marker

Bands colour ranges of the scale in a ring outside the arc; Marker draws the target across it. A value outside Min to Max fills the arc to its end but prints as given.

Uptime this month

website/Examples/Charts/GaugeChartBasicExample.razor Source

Half circle

StartAngle and EndAngle (degrees from 12 o'clock) shape the arc: -90 to 90 is a half circle. Thickness sets the arc width and Color takes any CSS colour.

Error budget used

website/Examples/Charts/GaugeChartHalfExample.razor Source

Playground

Uptime this month

Value

Min

Max

Marker

StartAngle

EndAngle

Thickness

Color

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<GaugeChart
            Value="99.95"
            Min="99"
            Marker="99.9"
            ValueFormat="{0:0.0#}%"
            Title="Uptime this month"
            Bands="@_bands" />

@code {
    private readonly GaugeBand[] _bands =
    [
        new(99, 99.9, ChartPalette.FromColor(Color.Error), "Below SLA"),
        new(99.9, 100, ChartPalette.FromColor(Color.Success), "Meets SLA"),
    ];
}

API

<GaugeChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.25
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Bands IReadOnlyList<GaugeBand>
= null
Optional coloured ranges drawn as a thin ring outside the arc, e.g. below, near and above target.
Color string
= null
Any CSS colour for the filled arc, such as var(--color-success); FromColor() maps a Color value to its theme token. Defaults to the theme's primary colour.
EndAngle double
= 120
Angle of Max in degrees. -90 to 90 draws a half circle.
Marker double?
= null
Optional target value, drawn as a line across the arc.
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.
StartAngle double
= -120
Angle of Min in degrees, 0 at 12 o'clock and clockwise positive.
Thickness double
= 0.2
Thickness of the arc as a fraction of its radius (0.02 to 0.9).
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 arc is clamped to [Min, Max]; the printed value is not.
ValueFormat string
= "{0:#,0.##}"
Format string for the value and ticks, e.g. "{0:0.00}%".
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	1.25	Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Bands	IReadOnlyList<GaugeBand>	null	Optional coloured ranges drawn as a thin ring outside the arc, e.g. below, near and above target.
Color	string	null	Any CSS colour for the filled arc, such as var(--color-success); FromColor() maps a Color value to its theme token. Defaults to the theme's primary colour.
EndAngle	double	120	Angle of Max in degrees. -90 to 90 draws a half circle.
Marker	double?	null	Optional target value, drawn as a line across the arc.
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.
StartAngle	double	-120	Angle of Min in degrees, 0 at 12 o'clock and clockwise positive.
Thickness	double	0.2	Thickness of the arc as a fraction of its radius (0.02 to 0.9).
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 arc is clamped to [Min, Max]; the printed value is not.
ValueFormat	string	"{0:#,0.##}"	Format string for the value and ticks, e.g. "{0:0.00}%".
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.