Blazor Circular Gauge

A high-performance circular gauge component for Blazor dashboards and KPI displays. Pure SVG rendering with zero JavaScript — works in Server, WebAssembly, and Auto render modes.

Free in Community Edition (MIT licensed). No watermark, no limitations.

Standalone package available: The gauge is also available as a free standalone package: dotnet add package Arcadia.Gauge — MIT licensed, zero dependencies, under 15 KB. View on NuGet

Why Arcadia Gauge?

Pure SVG — renders on the server, no JS hydration flash
Circular and semi-circular modes with FullCircle parameter
Color thresholds — green/yellow/red based on value ranges
Responsive — scales to any container size
Accessible — WCAG 2.1 AA with aria-label and role="status"
Animated — smooth arc animation on load with configurable duration
Free — included in the Community Edition (MIT)
Lightweight — the entire Charts package is ~120KB (vs 3MB+ for Syncfusion)

Circular Gauge (Full Circle)

A complete 360-degree radial progress indicator — ideal for scores, ratings, and completion percentages:

<ArcadiaGaugeChart Value="68" Min="0" Max="100" Label="Progress"
                 Width="180" Height="180" FullCircle="true" />

<ArcadiaGaugeChart Value="3.8" Min="0" Max="5" Label="Rating"
                 Width="180" Height="180" FullCircle="true"
                 ValueFormatString="0.0" />

<ArcadiaGaugeChart Value="850" Min="300" Max="900" Label="Score"
                 Width="180" Height="180" FullCircle="true" />

Semi-Circular Gauge (Default)

The default semi-circle gauge is great for speedometer-style displays:

<ArcadiaGaugeChart Value="73" Min="0" Max="100"
                 Label="CPU Usage" Width="200" Height="160" />

Color Thresholds

Set automatic color changes based on value ranges — perfect for status indicators:

@code {
    List<GaugeThreshold> thresholds = new()
    {
        new() { Value = 0, Color = "var(--arcadia-color-success)" },    // Green: 0-59
        new() { Value = 60, Color = "var(--arcadia-color-warning)" },   // Yellow: 60-84
        new() { Value = 85, Color = "var(--arcadia-color-danger)" },    // Red: 85-100
    };
}

<ArcadiaGaugeChart Value="73" Thresholds="@thresholds"
                 Label="Memory" Width="200" Height="160" />

Enterprise Dashboard Example

Combine multiple gauges for a KPI dashboard:

<div style="display: flex; gap: 24px; flex-wrap: wrap;">
    <ArcadiaGaugeChart Value="68" Label="Progress" FullCircle="true"
                     Width="160" Height="160" Thresholds="@thresholds" />
    <ArcadiaGaugeChart Value="3.8" Min="0" Max="5" Label="Rating"
                     FullCircle="true" Width="160" Height="160"
                     ValueFormatString="0.0" Color="var(--arcadia-color-info)" />
    <ArcadiaGaugeChart Value="850" Min="300" Max="900" Label="Score"
                     FullCircle="true" Width="160" Height="160"
                     Color="var(--arcadia-color-success)" />
</div>

Customization

Stroke Width

Control the arc thickness:

<ArcadiaGaugeChart Value="75" StrokeWidth="12" />  @* Thin *@
<ArcadiaGaugeChart Value="75" StrokeWidth="30" />  @* Thick *@

Custom Colors

<ArcadiaGaugeChart Value="42" Color="#8b5cf6" TrackColor="rgba(139,92,246,0.15)" />

Value Formatting

<ArcadiaGaugeChart Value="0.85" Max="1" ValueFormatString="P0" Label="Completion" />
<ArcadiaGaugeChart Value="142580" ValueFormatString="C0" Label="Revenue" />

Parameters

Parameter	Type	Default	Description
`Value`	`double`	—	Current gauge value
`Min`	`double`	0	Minimum range
`Max`	`double`	100	Maximum range
`FullCircle`	`bool`	false	Full 360° circular gauge or semi-circular (180°)
`Label`	`string?`	null	Label below the value display
`Thresholds`	`List<GaugeThreshold>?`	null	Color thresholds for automatic value-based coloring
`Color`	`string`	primary	Default arc color when no threshold matches
`TrackColor`	`string`	border	Background track arc color
`StrokeWidth`	`double`	20	Arc thickness in pixels
`ValueFormatString`	`string?`	null	.NET format string for the center value (C0, P1, N2, etc.)
`TrackOpacity`	`double`	0.3	Opacity of the background track
`AnimateOnLoad`	`bool`	true	Animate arc sweep on first render
`AnimationDuration`	`int`	800	Animation duration in milliseconds
`Title`	`string?`	null	Chart title above the gauge
`Height`	`double`	200	Height in pixels
`Width`	`double`	300	Width in pixels (0 = responsive)
`AriaLabel`	`string?`	null	Accessible description for screen readers

Needle Pointer

Add a physical needle indicator on top of the arc for a classic speedometer look:

<ArcadiaGaugeChart Value="72" Min="0" Max="100" Label="Speed"
                 ShowNeedle="true"
                 NeedleColor="#8b5cf6"
                 NeedleBaseWidth="8"
                 NeedleCapRadius="6"
                 Width="220" Height="180" />

Parameter	Type	Default	Description
`ShowNeedle`	`bool`	false	Display a needle pointer at the current value
`NeedleColor`	`string`	primary	Color of the needle
`NeedleBaseWidth`	`double`	6	Width of the needle base in pixels
`NeedleCapRadius`	`double`	5	Radius of the center cap circle

Tick Marks

Add major and minor tick marks around the gauge arc with optional labels:

<ArcadiaGaugeChart Value="65" Min="0" Max="100" Label="RPM"
                 ShowTicks="true"
                 MajorTickCount="5"
                 MinorTickCount="4"
                 ShowTickLabels="true"
                 Width="220" Height="180" />

Parameter	Type	Default	Description
`ShowTicks`	`bool`	false	Display tick marks around the arc
`MajorTickCount`	`int`	5	Number of major (long) tick marks
`MinorTickCount`	`int`	4	Number of minor ticks between each major tick
`ShowTickLabels`	`bool`	false	Show numeric labels at major tick positions

Gradient Arcs

Replace the solid arc color with a smooth gradient for a modern look:

<ArcadiaGaugeChart Value="80" Min="0" Max="100" Label="Performance"
                 GradientColors="@(new[] { "#8b5cf6", "#d946ef", "#ec4899" })"
                 Width="200" Height="160" />

Parameter	Type	Default	Description
`GradientColors`	`string[]?`	null	Array of colors for a gradient arc (overrides `Color`)

Colored Ranges

Define colored bands along the arc to indicate zones such as poor, fair, good, and excellent:

@code {
    List<GaugeRange> ranges = new()
    {
        new() { Start = 0,  End = 25,  Color = "#ef4444", Label = "Poor" },
        new() { Start = 25, End = 50,  Color = "#f59e0b", Label = "Fair" },
        new() { Start = 50, End = 75,  Color = "#3b82f6", Label = "Good" },
        new() { Start = 75, End = 100, Color = "#22c55e", Label = "Excellent" },
    };
}

<ArcadiaGaugeChart Value="68" Min="0" Max="100" Label="Quality Score"
                 Ranges="@ranges"
                 ShowNeedle="true"
                 Width="220" Height="180" />

Parameter	Type	Default	Description
`Ranges`	`List<GaugeRange>?`	null	Colored bands along the arc with start/end values

Editable Mode

Allow users to click or drag the gauge arc to change the value interactively:

<ArcadiaGaugeChart @bind-Value="temperature"
                 Min="16" Max="30" Label="Thermostat"
                 Editable="true"
                 ShowNeedle="true"
                 Width="200" Height="160" />

@code {
    double temperature = 22;
}

Parameter	Type	Default	Description
`Editable`	`bool`	false	Allow the user to change the value by clicking/dragging the arc

Custom Angles

Control the start and end angles to create quarter-circle, three-quarter, or any custom sweep:

@* Three-quarter circle gauge *@
<ArcadiaGaugeChart Value="75" Min="0" Max="100" Label="Progress"
                 StartAngle="135" EndAngle="405"
                 Width="200" Height="200" />

@* Quarter-circle gauge (bottom-right) *@
<ArcadiaGaugeChart Value="42" Min="0" Max="100" Label="Load"
                 StartAngle="0" EndAngle="90"
                 Width="160" Height="160" />

Parameter	Type	Default	Description
`StartAngle`	`double`	180	Start angle in degrees (0 = top, 90 = right, 180 = left)
`EndAngle`	`double`	360	End angle in degrees

Accessibility

role="figure" on the SVG container
aria-label with value and range description
Hidden data table for screen readers
Respects prefers-reduced-motion (animation disabled)
High contrast mode support

Comparison vs Syncfusion Gauge

Feature	Arcadia	Syncfusion
Price	Free (MIT)	$995+/year
Bundle size	~120KB (entire Charts package)	~3MB
JavaScript	0 KB (pure SVG)	Required
SSR/Prerender	Full (renders on server)	Partial (JS hydration)
Circular mode	Yes	Yes
Semi-circular	Yes	Yes
Color thresholds	Yes	Yes
Animation	Yes	Yes
WCAG AA	Yes	Partial

Installation

dotnet add package Arcadia.Charts
dotnet add package Arcadia.Theme

<link href="_content/Arcadia.Theme/css/arcadia.css" rel="stylesheet" />
<link href="_content/Arcadia.Charts/css/arcadia-charts.css" rel="stylesheet" />

The gauge is included in the free Community Edition. No Pro license required.