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

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

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

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

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

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

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

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

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

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:

@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" Color="#F44336"></LinearGaugeRange>
            </LinearGaugeRanges>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Result: A vertical linear gauge showing temperature from 0°C to 120°C with three color-coded ranges (green, yellow, red) and a pointer at 65°C.

Common Patterns

Pattern 1: Simple Progress Indicator

Use case: Show completion percentage or progress status

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Orientation="Syncfusion.Blazor.LinearGauge.Orientation.Horizontal" Width="400px" Height="80px">
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="100">
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="75" Type="Syncfusion.Blazor.LinearGauge.Point.Bar" 
                                    Color="#28a745" Width="20">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Pattern 2: Multi-Scale Dashboard Gauge

Use case: Display multiple metrics on one gauge

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="100">
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="60" Color="#007bff"></LinearGaugePointer>
                <LinearGaugePointer PointerValue="80" Color="#dc3545"></LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Pattern 3: Interactive Value Adjuster

Use case: Allow users to change values by dragging the pointer

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeEvents ValueChange="@OnValueChange"></LinearGaugeEvents>
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="100">
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="@currentValue" 
                                    EnableDrag="true">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

@code {
    private double currentValue = 50;
    
    private void OnValueChange(ValueChangeEventArgs args)
    {
        currentValue = args.Value;
    }
}

Pattern 4: Styled Thermometer

Use case: Temperature display with visual zones

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Width="150px" Height="400px">
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="-20" Maximum="120">
            <LinearGaugeAxisLabelStyle Format="{value}°">
            </LinearGaugeAxisLabelStyle>
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="@temperature" 
                                    Type="Syncfusion.Blazor.LinearGauge.Point.Bar"
                                    Color="#ff6b6b"
                                    Width="20">
                </LinearGaugePointer>
            </LinearGaugePointers>
            <LinearGaugeRanges>
                <LinearGaugeRange Start="-20" End="0" Color="#0099ff"></LinearGaugeRange>
                <LinearGaugeRange Start="0" End="25" Color="#00e676"></LinearGaugeRange>
                <LinearGaugeRange Start="25" End="120" Color="#ff5252"></LinearGaugeRange>
            </LinearGaugeRanges>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

@code {
    private double temperature = 35;
}

API Reference

The official Linear Gauge API is centered on the SfLinearGauge component and comprehensive child components for configuring axes, pointers, ranges, annotations, gradients, tooltips, and event handlers. This reference is based on the official Syncfusion Blazor Linear Gauge API documentation.

SfLinearGauge

Primary container component for the gauge. This is the root component that hosts all gauge elements.

Component Properties:

Sizing & Layout:

• Width (string): Sets the width of the linear gauge container
• Height (string): Sets the height of the linear gauge container
• Orientation (Orientation): Sets the gauge orientation (Horizontal or Vertical)
• Description (string): Sets the description for accessibility purposes

Appearance:

• Title (string): Sets the title text displayed on the gauge
• TitleStyle (LinearGaugeTitleStyle): Configures title font, position, and styling
• Background (string): Sets the background color of the gauge container
• Theme (Theme): Applies predefined themes (Bootstrap, Material, Fabric, Fluent, Tailwind, etc.)
• Container (LinearGaugeContainer): Configures the container appearance and border
• Margin (LinearGaugeMargin): Sets left, right, top, and bottom margins

Behavior:

• AnimationDuration (double): Sets the animation duration (in milliseconds) for initial rendering and pointer updates
• Format (string): Sets the number format for axis labels
• EnableGroupingSeparator (bool): Enables thousand separators in numbers
• ID (string): Sets the unique identifier for the gauge component
• TabIndex (int): Sets the tab order for keyboard navigation

Export & Print:

• AllowPrint (bool): Enables print functionality
• AllowPdfExport (bool): Enables PDF export functionality
• AllowImageExport (bool): Enables image export (PNG, SVG) functionality
• AllowMargin (bool): Includes margins when printing or exporting

Styling:

• RangePalettes (string[]): Defines automatic color palette for ranges

Methods:

// Update pointer value programmatically (async version)
public async Task SetPointerValueAsync(int axisIndex, int pointerIndex, double value)

// Update annotation content dynamically (async version)
public async Task SetAnnotationValueAsync(int annotationIndex, string content)

// Refresh the entire gauge (async version)
public async Task RefreshAsync()

// Print the gauge (requires AllowPrint="true")
public async Task PrintAsync()

// Export gauge to file (requires corresponding AllowXyzExport="true")
public async Task ExportAsync(ExportType type, string fileName, 
    PdfPageOrientation? orientation = null, bool allowDownload = true)

Export Types:

• ExportType.PNG
• ExportType.SVG
• ExportType.PDF

LinearGaugeAxes & LinearGaugeAxis

Container (LinearGaugeAxes) for one or more axes. Each LinearGaugeAxis defines a scale with range, ticks, labels, pointers, and ranges.

LinearGaugeAxis Properties:

Scale Configuration:

• Minimum (double): Sets the minimum value of the axis scale
• Maximum (double): Sets the maximum value of the axis scale
• IsInversed (bool): Reverses the direction of the axis (high to low instead of low to high)
• OpposedPosition (bool): Places the axis on the opposite side (left/right for vertical, top/bottom for horizontal)
• ShowLastLabel (bool): Shows or hides the last label on the axis

Child Components:

• LinearGaugeLine - Configures the axis line appearance
• LinearGaugeMajorTicks - Major tick marks on the axis
• LinearGaugeMinorTicks - Minor tick marks on the axis
• LinearGaugeAxisLabelStyle - Label styling and positioning
• LinearGaugeAxisLabelFont - Font properties for axis labels
• LinearGaugeContainer - Container for the axis
• LinearGaugePointers - Pointer collection for this axis
• LinearGaugeRanges - Range collection for this axis
• LinearGaugeLinearGradient - Gradient fill for axis elements
• LinearGaugeRadialGradient - Radial gradient for axis elements

Axis Line & Ticks

LinearGaugeLine - Defines the axis line appearance

• Height (double): Height of the axis line
• Width (double): Width of the axis line
• Color (string): Color of the axis line
• Offset (double): Offset from axis

LinearGaugeMajorTicks - Major tick configuration

• Interval (double): Interval between major ticks
• Height (double): Height of major tick marks
• Width (double): Width of major tick marks
• Color (string): Color of major ticks
• Position (Position): Position relative to axis (Inside, Outside, Cross)
• Offset (double): Offset from axis line

LinearGaugeMinorTicks - Minor tick configuration

• Interval (double): Interval between minor ticks
• Height (double): Height of minor tick marks
• Width (double): Width of minor tick marks
• Color (string): Color of minor ticks
• Position (Position): Position relative to axis
• Offset (double): Offset from axis line

Axis Labels

LinearGaugeAxisLabelStyle - Label styling and positioning

• Format (string): Format string for label values (e.g., "{value}°C")
• Position (Position): Label position (Inside, Outside, Cross)
• Offset (double): Distance from axis line
• FontFamily (string): Font family for labels
• Color (string): Color of label text
• Opacity (double): Opacity of labels (0 to 1)

LinearGaugeAxisLabelFont - Font properties for axis labels

• FontFamily (string): Font family name
• FontSize (string): Font size in pixels or relative units
• FontStyle (string): Font style (normal, italic, oblique)
• FontWeight (string): Font weight (normal, bold, lighter, bolder, 100-900)

LinearGaugePointers & LinearGaugePointer

Container (LinearGaugePointers) for one or more value indicators. Each LinearGaugePointer represents a value on the axis.

LinearGaugePointer Properties:

Value & Type:

• PointerValue (double): Sets the pointer value
• Type (PointerType): Pointer type (Marker or Bar)
• MarkerType (MarkerType): Shape of marker pointer:
• Circle
• Rectangle
• Triangle
• Diamond
• InvertedTriangle

Appearance:

• Color (string): Pointer color
• Width (double): Width of pointer
• Height (double): Height of pointer
• Opacity (double): Opacity of pointer (0 to 1)
• Offset (double): Offset from axis line
• Placement (Placement): Placement relative to axis (Center, Near, Far)
• RoundedCornerRadius (double): Radius for rounded corners (bar pointers)

Content:

• ImageUrl (string): URL for image pointer
• Text (string): Text to display with text pointer

Interaction:

• EnableDrag (bool): Allows user to drag the pointer to change value
• AnimationDuration (double): Duration of value change animation (milliseconds)

Child Components:

• LinearGaugePointerBorder - Border styling for pointer
• LinearGaugeMarkerTextStyle - Text styling for text pointers

Pointer Styling

LinearGaugePointerBorder - Pointer border properties

• Color (string): Border color
• Width (double): Border width

LinearGaugeMarkerTextStyle - Text styling for pointer text

• FontFamily (string): Font family
• FontSize (string): Font size
• Color (string): Text color
• FontWeight (string): Font weight
• Opacity (double): Text opacity

LinearGaugeRanges & LinearGaugeRange

Container (LinearGaugeRanges) for color-coded value zones. Each LinearGaugeRange defines a colored region.

LinearGaugeRange Properties:

Range Definition:

• Start (double): Start value of the range
• End (double): End value of the range

Appearance:

• Color (string): Background color of the range
• StartWidth (double): Width at start of range (for gradient width effect)
• EndWidth (double): Width at end of range
• Position (Position): Position relative to axis (Inside, Outside, Cross)
• Offset (double): Offset from axis line

Child Components:

• LinearGaugeRangeBorder - Border styling for range
• LinearGaugeRangeTooltipSettings - Tooltip for range (hover)

LinearGaugeRangeBorder - Range border properties

• Color (string): Border color
• Width (double): Border width

LinearGaugeAnnotations & LinearGaugeAnnotation

Container (LinearGaugeAnnotations) for text or HTML overlays. Each LinearGaugeAnnotation adds a label or custom content.

LinearGaugeAnnotation Properties:

Content & Positioning:

• AxisValue (double): Position on the axis where annotation appears
• AxisIndex (int): Index of the axis (if multiple axes)
• X (double): Horizontal pixel offset from axis value
• Y (double): Vertical pixel offset from axis value
• ZIndex (int): Layer order (higher appears on top)
• HorizontalAlignment (Alignment): Horizontal alignment (Near, Center, Far)
• VerticalAlignment (Alignment): Vertical alignment

Content:

• Content (string): Text or HTML content for annotation
• ContentTemplate (RenderFragment): Template for rendering annotation content

Child Components:

• LinearGaugeAnnotationFont - Font styling for text annotations

LinearGaugeAnnotationFont - Font properties for annotations

• FontFamily (string): Font family
• FontSize (string): Font size
• Color (string): Text color
• FontWeight (string): Font weight
• Opacity (double): Text opacity

Gradient Configuration

LinearGaugeLinearGradient - Linear gradient for gauge elements

• StartValue (double): Start position of gradient
• EndValue (double): End position of gradient
• ColorStops (ColorStops): Collection of color stops

LinearGaugeRadialGradient - Radial gradient for gauge elements

• Radius (string): Radius of radial gradient
• InnerPosition (InnerPosition): Inner circle position
• OuterPosition (OuterPosition): Outer circle position
• ColorStops (ColorStops): Collection of color stops

ColorStop / ColorStops - Gradient color definitions

• Offset (string): Position in gradient (e.g., "0%", "100%")
• Color (string): Color at this position
• Opacity (double): Opacity at this position

Container & Border Styling

LinearGaugeContainer - Outer container for the gauge

• Type (ContainerType): Container type (Normal, RoundedRectangle, Thermometer)
• Offset (double): Offset from the axis
• Width (double): Width of container
• BackgroundColor (string): Background color
• Border (LinearGaugeContainerBorder): Border styling

LinearGaugeContainerBorder - Container border properties

• Color (string): Border color
• Width (double): Border width

LinearGaugeBorder / LinearGaugeBorderSettings - Gauge border properties

• Color (string): Border color
• Width (double): Border width

LinearGaugeMargin / LinearGaugeMarginSettings - Margin configuration

• Left (double): Left margin
• Right (double): Right margin
• Top (double): Top margin
• Bottom (double): Bottom margin

Tooltip Configuration

LinearGaugeTooltipSettings - Pointer tooltip configuration

• Enable (bool): Enable or disable tooltips
• Format (string): Tooltip text format
• Position (TooltipPosition): Tooltip position (Top, Bottom, Left, Right)
• Fill (string): Tooltip background color
• Opacity (double): Tooltip opacity
• ShowAtMousePosition (bool): Show at cursor instead of pointer
• TextStyle (LinearGaugeTooltipTextStyle): Text styling
• Border (LinearGaugeTooltipBorder): Border styling

LinearGaugeRangeTooltipSettings - Range hover tooltip configuration

• Similar properties to tooltip settings for range hovers

LinearGaugeTooltipTextStyle - Tooltip text styling

• FontFamily (string), FontSize (string), Color (string), FontWeight (string), Opacity (double)

Events & Event Arguments

LinearGaugeEvents - Event handler component

@using Syncfusion.Blazor.LinearGauge

<LinearGaugeEvents 
    Load="OnLoad"
    Loaded="OnLoaded"
    AxisLabelRendering="OnAxisLabelRendering"
    AnnotationRendering="OnAnnotationRendering"
    ValueChange="OnValueChange"
    TooltipRendering="OnTooltipRendering"
    DragStart="OnDragStart"
    DragMove="OnDragMove"
    DragEnd="OnDragEnd"
    AnimationComplete="OnAnimationComplete"
    ResizeCompleted="OnResizeCompleted"
    OnGaugeMouseDown="OnMouseDown"
    OnGaugeMouseLeave="OnMouseLeave"
    OnGaugeMouseUp="OnMouseUp"
    Print="OnPrint">
</LinearGaugeEvents>

Event Types and Arguments:

Enums

Orientation - Gauge layout direction

Orientation.Horizontal  // Horizontal scale
Orientation.Vertical    // Vertical scale

Position - Element positioning relative to axis

Position.Inside      // Inside the axis
Position.Outside     // Outside the axis
Position.Cross       // Crossing the axis line

PointerType - Type of value indicator

PointerType.Marker   // Shaped marker (circle, square, etc.)
PointerType.Bar      // Bar/rectangle pointer

MarkerType - Shape of marker pointer

MarkerType.Circle
MarkerType.Rectangle
MarkerType.Triangle
MarkerType.Diamond
MarkerType.InvertedTriangle

Placement - Pointer position relative to axis

Placement.Center     // Centered on axis
Placement.Near       // Near side
Placement.Far        // Far side

ContainerType - Container shape

ContainerType.Normal              // Rectangular container
ContainerType.RoundedRectangle    // Rounded rectangle
ContainerType.Thermometer         // Thermometer shape

ExportType - Export format

ExportType.PNG   // Export as PNG image
ExportType.SVG   // Export as SVG image
ExportType.PDF   // Export as PDF document

TooltipPosition - Tooltip placement

TooltipPosition.Top      // Above the pointer
TooltipPosition.Bottom   // Below the pointer
TooltipPosition.Left     // Left of pointer
TooltipPosition.Right    // Right of pointer

Theme - Predefined color themes

Theme.Bootstrap
Theme.Material
Theme.Fabric
Theme.Fluent
Theme.Tailwind
Theme.Bootstrap5
Theme.FluentDark
Theme.MaterialDark
Theme.BootstrapDark
Theme.TailwindDark
// ... and others

Primary Component Hierarchy

SfLinearGauge (root)
├── LinearGaugeTitleStyle
├── LinearGaugeMargin
├── LinearGaugeBorder
├── LinearGaugeContainer
│   └── LinearGaugeContainerBorder
├── LinearGaugeAxes
│   └── LinearGaugeAxis (repeatable)
│       ├── LinearGaugeLine
│       ├── LinearGaugeMajorTicks
│       ├── LinearGaugeMinorTicks
│       ├── LinearGaugeAxisLabelStyle
│       ├── LinearGaugeAxisLabelFont
│       ├── LinearGaugeContainer
│       ├── LinearGaugeLinearGradient
│       ├── LinearGaugeRadialGradient
│       ├── LinearGaugePointers
│       │   └── LinearGaugePointer (repeatable)
│       │       ├── LinearGaugePointerBorder
│       │       └── LinearGaugeMarkerTextStyle
│       └── LinearGaugeRanges
│           └── LinearGaugeRange (repeatable)
│               ├── LinearGaugeRangeBorder
│               └── LinearGaugeRangeTooltipSettings
├── LinearGaugeAnnotations
│   └── LinearGaugeAnnotation (repeatable)
│       └── LinearGaugeAnnotationFont
├── LinearGaugeTooltipSettings
│   ├── LinearGaugeTooltipTextStyle
│   └── LinearGaugeTooltipBorder
└── LinearGaugeEvents
    ├── Load handler
    ├── Loaded handler
    ├── AxisLabelRendering handler
    ├── AnnotationRendering handler
    ├── ValueChange handler
    ├── TooltipRendering handler
    ├── DragStart/Move/End handlers
    ├── AnimationComplete handler
    └── ... more event handlers

Practical API Usage Notes

1. Async Methods: All component methods (SetPointerValueAsync, SetAnnotationValueAsync, RefreshAsync, PrintAsync, ExportAsync) are asynchronous and must be awaited.

1. Export Prerequisites: Ensure AllowPdfExport="true", AllowImageExport="true", or AllowPrint="true" on the gauge before calling corresponding export or print methods.

1. Animation: Set AnimationDuration="0" for instant updates, or higher values for smooth animated transitions.

1. Event Arguments: Event handler arguments are provided by the framework and contain context-specific information (e.g., ValueChangeEventArgs contains the new value).

1. Index-Based Access: When using SetPointerValueAsync or SetAnnotationValueAsync, use zero-based indices for axes, pointers, and annotations.

1. Performance: For frequent updates (e.g., every 100ms), consider batching updates or using AnimationDuration="0" to avoid animation overhead.

1. Accessibility: Use Description, Title, and proper ARIA labels when the gauge needs to be accessible to screen readers.

Complete Component List

Component Classes (from Syncfusion.Blazor.LinearGauge namespace):

1. SfLinearGauge - Main component
2. LinearGaugeAnnotation - Annotation element
3. LinearGaugeAnnotationFont - Annotation font styling
4. LinearGaugeAnnotations - Annotation collection
5. LinearGaugeAxes - Axis collection
6. LinearGaugeAxis - Axis configuration
7. LinearGaugeAxisLabelFont - Axis label font
8. LinearGaugeAxisLabelStyle - Axis label styling
9. LinearGaugeBorder - Gauge border
10. LinearGaugeBorderSettings - Border settings
11. LinearGaugeContainer - Container configuration
12. LinearGaugeContainerBorder - Container border
13. LinearGaugeEvents - Event handlers
14. LinearGaugeFontSettings - Font configuration
15. LinearGaugeLine - Axis line
16. LinearGaugeLinearGradient - Linear gradient
17. LinearGaugeMajorTicks - Major tick marks
18. LinearGaugeMargin - Margin settings
19. LinearGaugeMarginSettings - Margin configuration
20. LinearGaugeMarkerTextStyle - Marker text styling
21. LinearGaugeMinorTicks - Minor tick marks
22. LinearGaugePointer - Pointer element
23. LinearGaugePointerBorder - Pointer border
24. LinearGaugePointers - Pointer collection
25. LinearGaugeRadialGradient - Radial gradient
26. LinearGaugeRange - Range element
27. LinearGaugeRangeBorder - Range border
28. LinearGaugeRangeTooltipBorder - Range tooltip border
29. LinearGaugeRangeTooltipSettings - Range tooltip
30. LinearGaugeRangeTooltipTextStyle - Range tooltip text
31. LinearGaugeRanges - Range collection
32. LinearGaugeTickSettings - Tick configuration
33. LinearGaugeTitleStyle - Title styling
34. LinearGaugeTooltipBorder - Tooltip border
35. LinearGaugeTooltipSettings - Tooltip configuration
36. LinearGaugeTooltipTextStyle - Tooltip text styling
37. LinearGradient - Linear gradient definition
38. RadialGradient - Radial gradient definition
39. ColorStop - Gradient color stop
40. ColorStops - Gradient color stops collection
41. Point - Pointer type enum
42. GradientPosition - Gradient position
43. InnerPosition - Inner gradient position
44. OuterPosition - Outer gradient position

Event Argument Classes:

• LoadEventArgs
• LoadedEventArgs
• AxisLabelRenderEventArgs
• AnnotationRenderEventArgs
• ValueChangeEventArgs
• TooltipRenderEventArgs
• PointerDragEventArgs
• ResizeEventArgs
• MouseEventArgs
• PrintEventArgs
• AnimationCompleteEventArgs

Enum Types:

• Orientation - Horizontal or Vertical
• Position - Inside, Outside, Cross
• PointerType - Marker or Bar
• MarkerType - Circle, Rectangle, Triangle, Diamond, InvertedTriangle
• Placement - Center, Near, Far
• ContainerType - Normal, RoundedRectangle, Thermometer
• ExportType - PNG, SVG, PDF
• TooltipPosition - Top, Bottom, Left, Right
• Theme - Various theme options
• Alignment - Near, Center, Far
• PdfPageOrientation - Portrait, Landscape

Common Use Cases

1. Dashboard KPI Display

Display key performance indicators with color-coded ranges for quick status assessment. Use multiple gauges for different metrics.

2. Temperature Monitoring

Visualize temperature readings with appropriate ranges for different zones (freezing, normal, warning, critical).

3. Progress Tracking

Show task completion, project progress, or goal achievement using bar pointers on horizontal gauges.

4. Speedometer/Tachometer

Create vehicle dashboard components with styled pointers and ranges for speed or RPM display.

5. Sensor Data Visualization

Display real-time sensor readings (pressure, humidity, voltage) with dynamic pointer updates and threshold indicators.

6. Survey/Rating Display

Visualize survey results or ratings on a scale with markers showing average values and ranges for distribution.

7. Budget vs. Actual

Show financial metrics comparing budgeted vs. actual values using multiple pointers on the same axis.

8. Stock/Inventory Levels

Display inventory levels with color-coded ranges (critical, low, adequate, full) for quick status checks.

Tips for Implementation

When Starting

1. Begin with getting-started.md for setup
2. Add basic axis and pointer to verify functionality
3. Gradually add ranges, styling, and interactivity

For Customization

1. Use axes-configuration.md for scale customization
2. Use pointers.md for pointer styling
3. Use appearance-and-styling.md for overall look

For Interactivity

1. Enable pointer dragging for user input
2. Add tooltips for value display
3. Use events for responding to user actions
4. See user-interaction.md and methods-and-events.md

For Production

1. Implement accessibility features from accessibility-and-internationalization.md
2. Test with keyboard navigation
3. Verify screen reader compatibility
4. Configure proper ARIA labels

Next Steps

1. New to Linear Gauge? Start with getting-started.md
2. Need specific feature? Navigate to the relevant reference file based on your requirement
3. Building dashboard? Combine multiple patterns and refer to appearance-and-styling.md
4. Need interactivity? Check user-interaction.md and methods-and-events.md

All reference files are comprehensive and self-contained - you won't need to jump between multiple files for a single topic.