Implementing Syncfusion .NET MAUI Radial Gauges
Overview
The Syncfusion .NET MAUI Radial Gauge (SfRadialGauge) is a versatile data visualization control that displays numerical values on a circular scale. It's ideal for creating speedometers, temperature monitors, dashboards, progress indicators, compasses, and other circular metric displays.
When to Use This Skill
Use this skill when the user needs to:
- Create circular gauges - Speedometers, tachometers, temperature gauges, pressure meters
- Build dashboard visualizations - KPI displays, metric monitoring, status indicators
- Show progress - Circular progress bars, completion indicators, loading states
- Display ranges - Visual zones (safe/warning/danger), threshold indicators
- Implement interactive controls - Draggable dials, adjustable settings, user input controls
- Add animated transitions - Smooth value changes, real-time data updates
- Build compass/direction displays - Navigation aids, orientation indicators
Component Overview
The SfRadialGauge control provides:
- Multiple Pointer Types: 4 pointer styles (Needle, Shape, Content, Range) for versatile value indication
- Flexible Axis Configuration: Customizable scale ranges, angles (full circle, semi-circle, arc), labels, and ticks
- Visual Range Indicators: Color-coded zones with gradient support for safe/warning/danger visualization
- Custom Annotations: Place text, images, or any .NET MAUI view at specific positions using angle or axis value
- Animation System: Smooth pointer transitions with configurable duration and easing functions
- Interactive Controls: Draggable pointers with ValueChanged/ValueChanging events for user input
- Multiple Axes Support: Display several axes on one gauge for complex multi-metric visualizations
- Styling Options: Comprehensive customization of colors, gradients, thickness (pixel or factor-based sizing)
Key Features at a Glance
- Flexible Axes - Linear/custom scales, customizable labels, ticks, and styling
- Visual Ranges - Color-coded zones for quick value interpretation
- 4 Pointer Types - Needle, Shape (marker), Content (custom views), Range (arc)
- Multiple Pointers - Display multiple values on the same gauge
- Annotations - Add text, images, or custom views at specific positions
- Animation - Smooth transitions with customizable easing
- Interactive - Draggable pointers for user input
- Highly Customizable - Full control over appearance and behavior
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
When the user needs to:
- Install and set up the Radial Gauge package
- Configure NuGet packages and dependencies
- Register Syncfusion handlers in MauiProgram.cs
- Create their first basic radial gauge
- Understand the basic structure and components
- Get a working example quickly
Axis Configuration
📄 Read: references/axes.md
When the user needs to:
- Configure axis scale (minimum, maximum, interval)
- Customize axis start and end angles (circular, semi-circular, arc)
- Style axis lines (thickness, colors, gradients)
- Configure labels (position, rotation, formatting, custom text)
- Customize ticks (major/minor, length, position, styling)
- Add background content to the gauge
- Create multiple axes on a single gauge
- Understand axis positioning and factor-based layouts
Ranges and Visual Indicators
📄 Read: references/ranges.md
When the user needs to:
- Create color-coded ranges (e.g., safe/warning/danger zones)
- Set range start and end values
- Style ranges (colors, gradients, width)
- Position ranges (offset, inside/outside axis)
- Add multiple ranges to visualize zones
- Customize range caps (rounded, flat)
- Create reverse order ranges for 360° gauges
- Build speedometer-style indicators
Pointers (All Types)
📄 Read: references/pointers.md
When the user needs to:
- Needle Pointer - Classic gauge needle with knob and tail
- Shape Pointer - Marker symbols (circle, diamond, triangle, etc.)
- Content Pointer - Custom views (text, images, complex layouts)
- Range Pointer - Colored arc that fills from start to value
- Set pointer values and animate transitions
- Add multiple pointers to one gauge
- Customize pointer appearance (colors, sizes, shapes)
- Position pointers (offset from axis)
- Choose the right pointer type for the use case
Annotations
📄 Read: references/annotation.md
When the user needs to:
- Add text labels to display values or units
- Place images or icons on the gauge
- Add custom views at specific positions
- Position annotations using angle or axis value
- Control radial distance (position factor)
- Create multiple annotations
- Display dynamic content based on pointer values
- Build complex gauge layouts with labels and status indicators
Animation and Interaction
📄 Read: references/animation-and-interaction.md
When the user needs to:
- Enable smooth pointer animations
- Configure animation duration and easing
- Create spring or bounce effects
- Make pointers draggable for user input
- Handle pointer value changes
- Respond to user interactions
- Build interactive controls (volume, brightness, settings)
- Optimize animation performance
1---2name: syncfusion-maui-radial-gauge3description: Implements Syncfusion .NET MAUI Radial Gauge (SfRadialGauge) components. Use when working with radial gauges, circular gauges, speedometers, temperature monitors, meter gauges, or circular data visualization in .NET MAUI applications. This skill covers installation, axis configuration, ranges, pointer types (needle, shape, content, range), annotations, and animation.4---5
6# Implementing Syncfusion .NET MAUI Radial Gauges
7
8## Overview
9
10The Syncfusion .NET MAUI Radial Gauge (SfRadialGauge) is a versatile data visualization control that displays numerical values on a circular scale. It's ideal for creating speedometers, temperature monitors, dashboards, progress indicators, compasses, and other circular metric displays.
11
12## When to Use This Skill
13
14Use this skill when the user needs to:
15- **Create circular gauges** - Speedometers, tachometers, temperature gauges, pressure meters
16- **Build dashboard visualizations** - KPI displays, metric monitoring, status indicators
17- **Show progress** - Circular progress bars, completion indicators, loading states
18- **Display ranges** - Visual zones (safe/warning/danger), threshold indicators
19- **Implement interactive controls** - Draggable dials, adjustable settings, user input controls
20- **Add animated transitions** - Smooth value changes, real-time data updates
21- **Build compass/direction displays** - Navigation aids, orientation indicators
22
23## Component Overview
24
25The **SfRadialGauge** control provides:
26- **Multiple Pointer Types**: 4 pointer styles (Needle, Shape, Content, Range) for versatile value indication
27- **Flexible Axis Configuration**: Customizable scale ranges, angles (full circle, semi-circle, arc), labels, and ticks
28- **Visual Range Indicators**: Color-coded zones with gradient support for safe/warning/danger visualization
29- **Custom Annotations**: Place text, images, or any .NET MAUI view at specific positions using angle or axis value
30- **Animation System**: Smooth pointer transitions with configurable duration and easing functions
31- **Interactive Controls**: Draggable pointers with ValueChanged/ValueChanging events for user input
32- **Multiple Axes Support**: Display several axes on one gauge for complex multi-metric visualizations
33- **Styling Options**: Comprehensive customization of colors, gradients, thickness (pixel or factor-based sizing)
34
35## Key Features at a Glance
36
37- **Flexible Axes** - Linear/custom scales, customizable labels, ticks, and styling
38- **Visual Ranges** - Color-coded zones for quick value interpretation
39- **4 Pointer Types** - Needle, Shape (marker), Content (custom views), Range (arc)
40- **Multiple Pointers** - Display multiple values on the same gauge
41- **Annotations** - Add text, images, or custom views at specific positions
42- **Animation** - Smooth transitions with customizable easing
43- **Interactive** - Draggable pointers for user input
44- **Highly Customizable** - Full control over appearance and behavior
45
46## Documentation and Navigation Guide
47
48### Getting Started
49📄 **Read:** [references/getting-started.md](references/getting-started.md)
50
51When the user needs to:
52- Install and set up the Radial Gauge package
53- Configure NuGet packages and dependencies
54- Register Syncfusion handlers in MauiProgram.cs
55- Create their first basic radial gauge
56- Understand the basic structure and components
57- Get a working example quickly
58
59### Axis Configuration
60📄 **Read:** [references/axes.md](references/axes.md)
61
62When the user needs to:
63- Configure axis scale (minimum, maximum, interval)
64- Customize axis start and end angles (circular, semi-circular, arc)
65- Style axis lines (thickness, colors, gradients)
66- Configure labels (position, rotation, formatting, custom text)
67- Customize ticks (major/minor, length, position, styling)
68- Add background content to the gauge
69- Create multiple axes on a single gauge
70- Understand axis positioning and factor-based layouts
71
72### Ranges and Visual Indicators
73📄 **Read:** [references/ranges.md](references/ranges.md)
74
75When the user needs to:
76- Create color-coded ranges (e.g., safe/warning/danger zones)
77- Set range start and end values
78- Style ranges (colors, gradients, width)
79- Position ranges (offset, inside/outside axis)
80- Add multiple ranges to visualize zones
81- Customize range caps (rounded, flat)
82- Create reverse order ranges for 360° gauges
83- Build speedometer-style indicators
84
85### Pointers (All Types)
86📄 **Read:** [references/pointers.md](references/pointers.md)
87
88When the user needs to:
89- **Needle Pointer** - Classic gauge needle with knob and tail
90- **Shape Pointer** - Marker symbols (circle, diamond, triangle, etc.)
91- **Content Pointer** - Custom views (text, images, complex layouts)
92- **Range Pointer** - Colored arc that fills from start to value
93- Set pointer values and animate transitions
94- Add multiple pointers to one gauge
95- Customize pointer appearance (colors, sizes, shapes)
96- Position pointers (offset from axis)
97- Choose the right pointer type for the use case
98
99### Annotations
100📄 **Read:** [references/annotation.md](references/annotation.md)
101
102When the user needs to:
103- Add text labels to display values or units
104- Place images or icons on the gauge
105- Add custom views at specific positions
106- Position annotations using angle or axis value
107- Control radial distance (position factor)
108- Create multiple annotations
109- Display dynamic content based on pointer values
110- Build complex gauge layouts with labels and status indicators
111
112### Animation and Interaction
113📄 **Read:** [references/animation-and-interaction.md](references/animation-and-interaction.md)
114
115When the user needs to:
116- Enable smooth pointer animations
117- Configure animation duration and easing
118- Create spring or bounce effects
119- Make pointers draggable for user input
120- Handle pointer value changes
121- Respond to user interactions
122- Build interactive controls (volume, brightness, settings)
123- Optimize animation performance
124
gabrielmoreira