syncfusion-blazor-circular-gauge

What this skill does

# Implementing Syncfusion Blazor CircularGauge

**NuGet:** `Syncfusion.Blazor.CircularGauge` + `Syncfusion.Blazor.Themes`  
**Namespace:** `Syncfusion.Blazor.CircularGauge`

A comprehensive guide for implementing circular gauge components in Blazor applications. CircularGauge provides radial data visualization with customizable axes, pointers, ranges, annotations, and interactive features.

## When to Use This Skill

Use this skill when you need to:

- **Dashboard Gauges**: Create KPI dashboards with circular metric displays
- **Speedometers/Tachometers**: Build vehicle instrument panels or speed indicators
- **Temperature/Pressure Indicators**: Display environmental or industrial sensor data
- **Progress Visualization**: Show circular progress indicators or completion status
- **Status Displays**: Create color-coded status gauges with ranges (red/yellow/green zones)
- **Multi-Metric Displays**: Show multiple values with multiple pointers on a single gauge
- **Real-Time Monitoring**: Display live data updates in a circular format
- **Interactive Gauges**: Allow users to adjust values by dragging pointers
- **Radial KPIs**: Visualize performance metrics in a radial/circular layout

## Component Overview

The Syncfusion Blazor CircularGauge (`SfCircularGauge`) is a data visualization component that displays quantitative information in a circular arc. It supports multiple pointer types, color-coded ranges, custom annotations, legends, and rich interactivity.

**Key Capabilities:**
- Multiple pointer types (needle, range bar, marker)
- Configurable axes with custom ranges and angles
- Color-coded ranges for visual zones
- Annotations with text, images, or HTML content
- Tooltips and user interactions
- Pointer dragging for value adjustment
- Legends for ranges
- Animations and transitions
- Globalization and RTL support
- Accessibility features (WCAG compliant)
- Print and export functionality

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)

Read this reference when you need to:
- Install NuGet packages and set up the component
- Configure services and CSS/theme imports
- Create your first basic circular gauge
- Understand project structure and prerequisites
- Run the application with CircularGauge

### Axes Configuration
📄 **Read:** [references/axes-configuration.md](references/axes-configuration.md)

Read this reference when you need to:
- Customize axis appearance (line width, color, background)
- Set minimum and maximum values for the scale
- Configure axis radius and positioning
- Set start and end angles (semi-circle, quarter-circle, custom arcs)
- Configure axis direction (clockwise/anticlockwise)
- Customize labels (format, font, position, rotation, custom text)
- Configure major and minor ticks (intervals, size, styling)
- Implement multiple axes on a single gauge

### Pointers
📄 **Read:** [references/pointers.md](references/pointers.md)

Read this reference when you need to:
- Add needle pointers with customizable appearance
- Configure needle cap/knob and tail styling
- Implement range bar pointers with gradients
- Add marker pointers (circle, rectangle, triangle, diamond, image)
- Set pointer values and animate pointer movement
- Use multiple pointers of different types on one axis
- Enable pointer dragging for interactive value adjustment
- Position and layer pointers correctly

### Ranges
📄 **Read:** [references/ranges.md](references/ranges.md)

Read this reference when you need to:
- Create color-coded zones on the gauge (e.g., red/yellow/green)
- Define range start and end values
- Customize range colors, gradients, and styling
- Configure range positioning (radius and thickness)
- Implement multiple overlapping ranges
- Add rounded corners to ranges
- Use ranges for status indicators or zone marking

### Annotations
📄 **Read:** [references/annotations.md](references/annotations.md)

Read this reference when you need to:
- Add text annotations to display values or labels
- Insert HTML content or images as annotations
- Position annotations using angle, radius, or X/Y coordinates
- Style annotations (font, color, background, borders)
- Create multiple annotations on a single gauge
- Display dynamic content (e.g., current pointer value)
- Add conditional annotations based on gauge state
- Center labels showing gauge readings

### Legend
📄 **Read:** [references/legend.md](references/legend.md)

Read this reference when you need to:
- Enable legends for gauge ranges
- Position legends (top, bottom, left, right, custom)
- Customize legend appearance (font, colors, shapes, borders)
- Implement interactive legends with toggle functionality
- Create custom legend templates
- Handle legend click events

### Appearance and Styling
📄 **Read:** [references/appearance.md](references/appearance.md)

Read this reference when you need to:
- Apply built-in themes (Material, Bootstrap, Fluent, etc.)
- Customize colors, backgrounds, and borders
- Configure gauge dimensions (width, height, responsive sizing)
- Add and style gauge titles
- Configure center X/Y positioning
- Set up animations (duration, easing)
- Implement print and export functionality (image/PDF)
- Apply custom styling and CSS classes

### User Interaction
📄 **Read:** [references/user-interaction.md](references/user-interaction.md)

Read this reference when you need to:
- Enable and customize tooltips
- Create custom tooltip templates
- Enable pointer dragging for user input
- Handle drag events (DragStart, DragMove, DragEnd)
- Implement gauge events (Load, Loaded, AnimationComplete, etc.)
- Handle AxisLabelRendering and TooltipRendering events
- Restrict pointer drag ranges
- Create interactive gauges (adjustable temperature, speed controls)

### Globalization
📄 **Read:** [references/globalization.md](references/globalization.md)

Read this reference when you need to:
- Format numbers based on locale
- Implement custom number patterns
- Localize labels and text
- Enable RTL (right-to-left) support
- Format currency or date/time values
- Integrate CLDR data for internationalization

### Advanced Features
📄 **Read:** [references/advanced-features.md](references/advanced-features.md)

Read this reference when you need to:
- Use methods (SetPointerValue, SetAnnotationValue, Refresh, Print, Export)
- Update pointer values dynamically at runtime
- Optimize performance for complex gauges
- Place gauges inside other components (grids, dashboards, tabs)
- Implement real-time data updates with timers or SignalR
- Configure accessibility features (WCAG, keyboard navigation, screen readers)
- Implement responsive design patterns
- Handle server-side vs WebAssembly considerations
- Test and troubleshoot complex gauge scenarios

## Quick Start Example

Here's a basic circular gauge with a needle pointer:

```cshtml
@page "/circular-gauge"
@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="120">
            <CircularGaugePointers>
                <CircularGaugePointer Value="65" Color="#007DD1">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>
```

**Prerequisites:**
1. Install `Syncfusion.Blazor.CircularGauge` and `Syncfusion.Blazor.Themes` NuGet packages
2. Register services: `builder.Services.AddSyncfusionBlazor();`
3. Import theme CSS in `App.razor` or `index.html`

## Common Patterns

### Pattern 1: Speedometer Gauge

```cshtml
@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="120" StartAngle="220" EndAngle="140">
            <CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisLabelFont Size="12px"></CircularGaugeAxisLabelFont>
            </CircularGaugeAxisLabelStyle>
            <CircularGaugeAxisLineStyle Width="10" Color="#E0E0E0"