syncfusion-blazor-linear-gauge

What this skill does

# Implementing Syncfusion Blazor Linear Gauges

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

## When to Use This Skill

Use this skill when the user needs to:
- **Visualize numeric values** on a linear scale (horizontal or vertical)
- **Display measurement data** like temperature, pressure, speed, or progress
- **Create dashboard components** with gauge visualizations
- **Implement KPI displays** with ranges and indicators
- **Show real-time data** with animated pointers
- **Build interactive gauges** where users can drag pointers to change values
- **Create multi-scale visualizations** with multiple axes and pointers

The Syncfusion Blazor Linear Gauge is ideal for applications requiring precise numeric visualization with customizable scales, pointers, and ranges.

---

## Component Overview

The **Blazor Linear Gauge (SfLinearGauge)** is a data visualization component that displays numeric values on a linear scale with features including:

- **Multiple axes** with customizable ranges and styling
- **Various pointer types** (marker shapes, bar pointers, text, images)
- **Color-coded ranges** for value categorization
- **Annotations** for labels and custom content
- **Interactive features** including drag-to-change pointer values
- **Events and methods** for dynamic updates
- **Accessibility support** with WCAG compliance
- **Internationalization** for global applications

---

## Documentation and Navigation Guide

This skill provides comprehensive, self-contained reference files for each aspect of the Linear Gauge component. Read the appropriate reference based on your current need.

### Getting Started

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

**When to read:** First-time setup, new project initialization, installation questions

**What's covered:**
- Installation via Visual Studio, VS Code, and .NET CLI
- NuGet package installation (Syncfusion.Blazor.LinearGauge, Syncfusion.Blazor.Themes)
- Namespace imports and service registration
- Stylesheet and script references
- Basic LinearGauge component implementation
- Adding pointers and setting values
- Adding titles and ranges
- Running your first gauge application

### Core Components

#### Axes Configuration

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

**When to read:** Setting up gauge scales, customizing axis appearance, working with multiple axes

**What's covered:**
- Setting Minimum and Maximum values for the scale
- Line customization (height, width, color, offset)
- Major ticks configuration (interval, height, color, width, position, offset)
- Minor ticks configuration (interval, height, color, width, position, offset)
- Label customization (format, font, position, offset)
- Multiple axes on single gauge
- Inverse axis direction
- Opposed position for axes
- Complete code examples for all configurations

#### Pointers

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

**When to read:** Adding value indicators, customizing pointer appearance, implementing multiple pointers

**What's covered:**
- Setting pointer values
- Marker pointers with various shapes (Circle, Rectangle, Triangle, Diamond, InvertedTriangle)
- Bar pointers with customization options
- Image pointers with custom images
- Text pointers with custom styling
- Pointer positioning and placement
- Animation configuration for smooth transitions
- Multiple pointers on single axis
- Drag and drop interaction for value changes
- Complete examples for each pointer type

#### Ranges

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

**When to read:** Adding color-coded value regions, implementing performance zones, creating visual thresholds

**What's covered:**
- Setting range start and end values
- Range color customization
- Range positioning (inside, outside, cross)
- Range offset configuration
- Start and end width for gradient effects
- Multiple ranges on single axis
- Practical use cases (temperature zones, performance indicators, status ranges)
- Complete code examples with visual results

### Appearance and Styling

#### Annotations

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

**When to read:** Adding labels, custom content, units, or dynamic text to the gauge

**What's covered:**
- Adding text annotations
- HTML content in annotations
- Positioning annotations with x, y coordinates
- Z-index for layering multiple annotations
- Font styling for text annotations
- Horizontal and vertical alignment
- Multiple annotations on gauge
- Dynamic content updates
- Practical examples (unit labels, value displays, warnings)

#### Appearance and Styling

📄 **Read:** [references/appearance-and-styling.md](references/appearance-and-styling.md)

**When to read:** Customizing gauge look and feel, theming, responsive design, print styling

**What's covered:**
- Container customization (width, height, background, border)
- Orientation (horizontal vs vertical)
- Margin and container adjustments
- Title customization (text, font, position)
- Theme selection (Bootstrap, Material, Fabric, Fluent, Tailwind, etc.)
- Custom CSS styling
- Responsive design considerations
- Color schemes and palettes
- Print-friendly styling
- Complete styling examples

### Advanced Features

#### Methods and Events

📄 **Read:** [references/methods-and-events.md](references/methods-and-events.md)

**When to read:** Implementing dynamic updates, handling user interactions, programmatic control

**What's covered:**
- setPointerValue() method for dynamic pointer updates
- setAnnotationValue() method for annotation updates
- print() method for printing gauges
- refresh() method for re-rendering
- Load and Loaded events
- AnimationComplete event
- AxisLabelRendering event for label customization
- AnnotationRendering event
- ValueChange event for user interactions
- TooltipRendering event
- ResizeCompleted event
- Complete event handler examples with practical scenarios

#### User Interaction

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

**When to read:** Enabling tooltips, drag interactions, mouse/touch events, value changes

**What's covered:**
- Tooltip configuration and customization
- Tooltip templates with custom HTML
- Pointer drag to change values
- Enabling/disabling pointer interaction
- Mouse and touch event handling
- Value change tracking and callbacks
- Animation on user interaction
- Complete interactive examples

### Accessibility and Internationalization

📄 **Read:** [references/accessibility-and-internationalization.md](references/accessibility-and-internationalization.md)

**When to read:** Implementing WCAG compliance, keyboard navigation, screen readers, global applications

**What's covered:**
- Accessibility overview (WCAG 2.1 Level AA compliance)
- Keyboard navigation support
- Screen reader compatibility
- ARIA attributes and labels
- High contrast mode support
- Focus indicators
- Internationalization (i18n) setup
- Number formatting for different locales
- RTL (Right-to-Left) support
- Complete accessibility implementation examples

---

## Quick Start Example

Here's a minimal example to get started with Blazor Linear Gauge:

```razor
@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Title="Temperature Monitor">
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="120">
            <LinearGaugeAxisLabelStyle Format="{value}°C"></LinearGaugeAxisLabelStyle>
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="65" Color="#007bff">
                </LinearGaugePointer>
            </LinearGaugePointers>
            <LinearGaugeRanges>
                <LinearGaugeRange Start="0" End="40" Color="#4CAF50"></LinearGaugeRange>
                <LinearGaugeRange Start="40" End="80" Color="#FFC107"></LinearGaugeRange>
                <LinearGaugeRange Start="80" End="120" Col