syncfusion-winui-radial-gauge

Q: How do I install syncfusion-winui-radial-gauge?

Run npx skills add https://github.com/syncfusion/winui-ui-components-skills --skill syncfusion-winui-radial-gauge in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-winui-radial-gauge/ (personal) or .claude/skills/syncfusion-winui-radial-gauge/ (project).

by syncfusionFrontend & Design

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.

Installs: 47
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/winui-ui-components-skills --skill syncfusion-winui-radial-gauge

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-winui-radial-gauge automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

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

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

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

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

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

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

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:

<Window x:Class="RadialGaugeApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:gauge="using:Syncfusion.UI.Xaml.Gauges">
    
    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis Maximum="150"
                              Interval="10">
                
                <!-- Color-coded ranges -->
                <gauge:RadialAxis.Ranges>
                    <gauge:GaugeRange StartValue="0"
                                      EndValue="50"
                                      Background="Green" />
                    <gauge:GaugeRange StartValue="50"
                                      EndValue="100"
                                      Background="Orange" />
                    <gauge:GaugeRange StartValue="100"
                                      EndValue="150"
                                      Background="Red" />
                </gauge:RadialAxis.Ranges>
                
                <!-- Needle pointer -->
                <gauge:RadialAxis.Pointers>
                    <gauge:NeedlePointer Value="90"
                                         EnableAnimation="True" />
                </gauge:RadialAxis.Pointers>
                
                <!-- Value annotation -->
                <gauge:RadialAxis.Annotations>
                    <gauge:GaugeAnnotation DirectionUnit="Angle"
                                           DirectionValue="90"
                                           PositionFactor="0.5">
                        <gauge:GaugeAnnotation.Content>
                            <TextBlock Text="90"
                                       FontSize="25"
                                       FontWeight="Bold" />
                        </gauge:GaugeAnnotation.Content>
                    </gauge:GaugeAnnotation>
                </gauge:RadialAxis.Annotations>
                
            </gauge:RadialAxis>
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>
    
</Window>

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

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis Minimum="-60"
                          Maximum="60"
                          Interval="20"
                          StartAngle="180"
                          EndAngle="0">
            
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="-60"
                                  EndValue="0"
                                  Background="#2196F3" />
                <gauge:GaugeRange StartValue="0"
                                  EndValue="30"
                                  Background="#4CAF50" />
                <gauge:GaugeRange StartValue="30"
                                  EndValue="60"
                                  Background="#FF5722" />
            </gauge:RadialAxis.Ranges>
            
            <gauge:RadialAxis.Pointers>
                <gauge:RangePointer Value="25"
                                    PointerWidth="15"
                                    EnableAnimation="True" />
            </gauge:RadialAxis.Pointers>
            
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation>
                    <gauge:GaugeAnnotation.Content>
                        <TextBlock Text="25°C"
                                   FontSize="30"
                                   FontWeight="Bold" />
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
            
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Pattern 2: Interactive Draggable Gauge

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowTicks="False"
                          AxisLineFill="CornflowerBlue"
                          AxisLineWidth="30">
            
            <gauge:RadialAxis.Pointers>
                <gauge:ShapePointer Value="60"
                                    IsInteractive="True"
                                    MarkerOffset="-30"
                                    Background="Indigo"
                                    ValueChanged="Pointer_ValueChanged" />
            </gauge:RadialAxis.Pointers>
            
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

private void Pointer_ValueChanged(object sender, ValueChangedEventArgs e)
{
    // Handle pointer value changes
    Debug.WriteLine($"New value: {e.Value}");
}

Pattern 3: Multi-Axis Clock

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <!-- Hours axis -->
        <gauge:RadialAxis Maximum="12"
                          Interval="1"
                          RadiusFactor="0.8"
                          LabelPosition="Outside">
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value="10"
                                     NeedleLength="0.5"
                                     NeedleEndWidth="8" />
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
        
        <!-- Minutes axis -->
        <gauge:RadialAxis Maximum="60"
                          Interval="5"
                          RadiusFactor="0.95"
                          LabelPosition="Outside">
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value="35"
                                     NeedleLength="0.7"
                                     NeedleEndWidth="4" />
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Pattern 4: Progress Ring with Percentage

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowLabels="False"
                          ShowTicks="False"
                          StartAngle="270"
                          EndAngle="270"
                          Maximum="100"
                          AxisLineWidth="20"
                          AxisLineFill="LightGray">
            
            <gauge:RadialAxis.Pointers>
                <gauge:RangePointer Value="73"
                                    PointerWidth="20"
                                    Background="#4CAF50"
                                    CornerStyle="BothCurve"
                                    EnableAnimation="True" />
            </gauge:RadialAxis.Pointers>
            
            <gauge:RadialAxis.Annotations>
                <gauge:GaugeAnnotation>
                    <gauge:GaugeAnnotation.Content>
                        <TextBlock>
                            <Run Text="73" FontSize="40" FontWeight="Bold" />
                            <Run Text="%" FontSize="20" />
                        </TextBlock>
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
            </gauge:RadialAxis.Annotations>
            
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

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

Speedometer/Tachometer - Vehicle speed/RPM display with color-coded danger zones
Temperature Gauge - Climate monitors with cold/moderate/hot ranges
Pressure Meter - Tire pressure, hydraulic pressure with threshold indicators
Battery Level - Circular battery indicator with percentage annotation
Fitness Tracker - Activity rings showing steps, calories, distance
KPI Dashboard - Business metrics with goal thresholds
Volume Control - Draggable circular volume adjuster
Compass - Directional gauge with degree markings
Timer/Stopwatch - Elapsed time visualization
Progress Indicator - Task completion, download progress
Rating Display - Score visualization (1-10 scale)
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

FAQ

What does the syncfusion-winui-radial-gauge skill do?

How do I install syncfusion-winui-radial-gauge?

Run npx skills add https://github.com/syncfusion/winui-ui-components-skills --skill syncfusion-winui-radial-gauge in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-winui-radial-gauge/ (personal) or .claude/skills/syncfusion-winui-radial-gauge/ (project).

Which AI agents can use syncfusion-winui-radial-gauge?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-winui-radial-gauge safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-winui-radial-gauge?

It is published by syncfusion in syncfusion/winui-ui-components-skills. It has 47 recorded installs.