# Syncfusion Winui Radial Gauge
> Implement Syncfusion WinUI Radial Gauge (SfRadialGauge) component for circular data visualization in desktop applications. Use this when working with radial gauges, speedometers, temperature monitors, or dashboard meters. This skill covers axis configuration, multiple pointer types (needle, shape, content, range), ranges with gradients, annotations, animations, and interactive dragging for WinUI/.NET desktop applications.
- Skill: `syncfusion/syncfusion-winui-radial-gauge` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add syncfusion/syncfusion-winui-radial-gauge`
- Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion/syncfusion-winui-radial-gauge/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: syncfusion (https://skillmd.com/u/syncfusion)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/syncfusion/syncfusion-winui-radial-gauge
---
# Implementing Radial Gauge
The Syncfusion WinUI Radial Gauge (SfRadialGauge) is a multi-purpose data visualization control that displays numerical values on a circular scale. It's ideal for creating speedometers, temperature monitors, dashboard gauges, meter gauges, multi-axis clocks, watches, activity gauges, compasses, and other circular indicators.
## When to Use This Skill
Use this skill when you need to:
- **Display metrics circularly** - Speedometers, tachometers, fuel gauges, pressure meters
- **Create dashboard indicators** - KPI gauges, performance monitors, progress indicators
- **Build measurement displays** - Temperature monitors, humidity gauges, voltage meters
- **Implement activity trackers** - Fitness rings, progress circles, goal trackers
- **Design custom dials** - Compass displays, clock faces, directional indicators
- **Show ranges visually** - Color-coded zones (red/yellow/green), danger/warning/safe areas
- **Animate value changes** - Smooth transitions with pointer animations
- **Enable user interaction** - Draggable pointers for value adjustment
- **Display multiple metrics** - Multi-axis gauges showing related data points
## Component Overview
**Key Features:**
- **Circular axis** with customizable scale, labels, ticks, and styling
- **Four pointer types** - Needle, Shape, Content, and Range pointers
- **Visual ranges** - Color-coded segments with gradient support
- **Annotations** - Add text, images, or custom UI elements
- **Animations** - Smooth pointer movements with easing functions
- **Interactive dragging** - User-adjustable pointer values
- **Multiple axes** - Display multiple scales in one gauge
- **Flexible styling** - Pixel or factor-based sizing for responsive layouts
## Documentation and Navigation Guide
### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
Use when you need to:
- Install and set up Syncfusion WinUI Radial Gauge
- Create your first radial gauge
- Add basic axis, ranges, pointers, and annotations
- Understand the component structure
- Get a complete working example
### Axis Configuration
📄 **Read:** [references/axis-configuration.md](references/axis-configuration.md)
Use when you need to:
- Configure axis minimum, maximum, and interval
- Customize start and end angles (180°, 270°, 360°, etc.)
- Adjust axis radius and positioning
- Style axis line (width, color, gradients)
- Customize labels (format, template, rotation, position)
- Configure ticks (major/minor, length, style, position)
- Show/hide axis elements
- Implement multiple axes
- Create custom scale ranges
- Handle axis events
### Pointers
📄 **Read:** [references/pointers.md](references/pointers.md)
Use when you need to:
- Add needle pointers with knobs and tails
- Use shape pointers (circle, diamond, triangle, etc.)
- Create content pointers with custom UI
- Implement range pointers for arc segments
- Add multiple pointers to one axis
- Enable interactive pointer dragging
- Animate pointer movements
- Handle pointer value change events
- Customize pointer appearance and offset
### Ranges
📄 **Read:** [references/ranges.md](references/ranges.md)
Use when you need to:
- Create color-coded value ranges
- Define start and end values for ranges
- Customize range width (equal or tapered)
- Apply gradients to ranges
- Position ranges (offset from axis)
- Add labels to ranges
- Use range colors for axis elements
- Create template-based range labels
### Annotations
📄 **Read:** [references/annotations.md](references/annotations.md)
Use when you need to:
- Add text labels at specific positions
- Display images on the gauge
- Position annotations using angles or axis values
- Adjust annotation distance from center
- Align annotations (horizontal/vertical)
- Add custom UI elements as annotations
### Animation
📄 **Read:** [references/animation.md](references/animation.md)
Use when you need to:
- Enable pointer animations
- Control animation duration
- Apply easing functions (linear, bounce, elastic, etc.)
- Create smooth value transitions
### API Reference
📄 **Read:** [references/api-reference.md](references/api-reference.md)
Use when you need to:
- Look up specific properties
- Understand class hierarchies
- Find available customization options
- Reference complete API documentation
## Quick Start Example
Here's a basic speedometer gauge with ranges and needle pointer:
```xaml
```
```csharp
using Syncfusion.UI.Xaml.Gauges;
using Microsoft.UI.Xaml;
namespace RadialGaugeApp
{
public sealed partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
// Can also create gauge programmatically
SfRadialGauge gauge = new SfRadialGauge();
RadialAxis axis = new RadialAxis();
axis.Maximum = 150;
axis.Interval = 10;
// Add ranges
axis.Ranges.Add(new GaugeRange {
StartValue = 0,
EndValue = 50,
Background = new SolidColorBrush(Colors.Green)
});
// Add pointer
axis.Pointers.Add(new NeedlePointer {
Value = 90,
EnableAnimation = true
});
gauge.Axes.Add(axis);
}
}
}
```
## Common Patterns
### Pattern 1: Temperature Monitor
```xaml
```
### Pattern 2: Interactive Draggable Gauge
```xaml
```
```csharp
private void Pointer_ValueChanged(object sender, ValueChangedEventArgs e)
{
// Handle pointer value changes
Debug.WriteLine($"New value: {e.Value}");
}
```
### Pattern 3: Multi-Axis Clock
```xaml
```
### Pattern 4: Progress Ring with Percentage
```xaml
```
## Key Properties by Category
### SfRadialGauge
- `Axes` - Collection of RadialAxis objects
- `CanScaleToFit` - Position axis based on start/end angles
### Axis Configuration
- `Minimum` / `Maximum` - Axis value range
- `Interval` - Space between labels
- `StartAngle` / `EndAngle` - Circular arc angles (0-360°)
- `RadiusFactor` - Axis size (0-1 factor of available space)
- `IsInversed` - Counter-clockwise direction
### Axis Styling
- `AxisLineWidth` / `AxisLineWidthUnit` - Line thickness (Pixel/Factor)
- `AxisLineFill` - Line color/brush
- `GradientStops` - Gradient colors on axis line
- `ShowAxisLine` - Axis line visibility
### Labels & Ticks
- `ShowLabels` / `ShowTicks` - Element visibility
- `LabelFormat` - Number format (currency, percent, etc.)
- `LabelTemplate` - Custom label template
- `LabelPosition` / `TickPosition` - Inside/Outside/Cross
- `LabelOffset` / `TickOffset` - Distance from axis
- `MajorTickLength` / `MinorTickLength` - Tick sizes
- `MinorTicksPerInterval` - Minor tick count
### Pointers (All Types)
- `Value` - Current pointer value
- `EnableAnimation` - Animate on value change
- `AnimationDuration` - Animation time (ms)
- `AnimationEasingFunction` - Easing function
- `IsInteractive` - Enable dragging
### Needle Pointer Specific
- `NeedleLength` / `NeedleStartWidth` / `NeedleEndWidth` - Needle shape
- `KnobRadius` / `KnobFill` / `KnobStroke` - Center knob
- `TailLength` / `TailWidth` - Needle tail
### Shape Pointer Specific
- `ShapeType` - Circle, Diamond, Triangle, etc.
- `ShapeHeight` / `ShapeWidth` - Shape size
- `MarkerOffset` - Distance from axis
### Range Pointer Specific
- `PointerWidth` - Arc width
- `CornerStyle` - BothFlat, BothCurve, StartCurve, EndCurve
### Ranges
- `StartValue` / `EndValue` - Range boundaries
- `StartWidth` / `EndWidth` - Range thickness
- `WidthUnit` - Pixel or Factor
- `RangeOffset` - Distance from axis
- `Background` - Range color
- `GradientStops` - Gradient colors
- `Label` / `LabelTemplate` - Range label
### Annotations
- `DirectionUnit` - Angle or AxisValue
- `DirectionValue` - Position value
- `PositionFactor` - Distance from center (0-1)
- `Content` - Any UIElement
## Common Use Cases
1. **Speedometer/Tachometer** - Vehicle speed/RPM display with color-coded danger zones
2. **Temperature Gauge** - Climate monitors with cold/moderate/hot ranges
3. **Pressure Meter** - Tire pressure, hydraulic pressure with threshold indicators
4. **Battery Level** - Circular battery indicator with percentage annotation
5. **Fitness Tracker** - Activity rings showing steps, calories, distance
6. **KPI Dashboard** - Business metrics with goal thresholds
7. **Volume Control** - Draggable circular volume adjuster
8. **Compass** - Directional gauge with degree markings
9. **Timer/Stopwatch** - Elapsed time visualization
10. **Progress Indicator** - Task completion, download progress
11. **Rating Display** - Score visualization (1-10 scale)
12. **Multi-Metric Display** - Multiple axes showing related measurements
## Notes
- All size properties support **Pixel** or **Factor** units for responsive layouts
- Factor values (0-1) are multiplied by axis radius for proportional sizing
- Use **animations** for smooth transitions when updating values
- Enable **IsInteractive** for user-adjustable pointers with drag support
- Multiple axes can share the same center with different radius factors
- **GradientStops** provide smooth color transitions based on axis values
- Annotations can contain any WinUI UIElement (TextBlock, Image, Grid, etc.)
---
**Installation:** Install the `Syncfusion.Gauge.WinUI` NuGet package
**Namespace:** `Syncfusion.UI.Xaml.Gauges`
**GitHub Samples:** [WinUI Radial Gauge Demos](https://github.com/syncfusion/winui-demos/tree/master/radialgauge)