Implementing Syncfusion Blazor Linear Gauges

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:

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" 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

razor

@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

razor

@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

razor

@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

razor

@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:

csharp

// 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

razor

@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:

Event	Argument Type	Description
`Load`	`LoadEventArgs`	Fires before gauge renders; can cancel with `args.Cancel = true`
`Loaded`	`LoadedEventArgs`	Fires after gauge is successfully rendered
`AxisLabelRendering`	`AxisLabelRenderEventArgs`	Fires before each axis label is rendered; modify `args.Text` to customize
`AnnotationRendering`	`AnnotationRenderEventArgs`	Fires before annotation is rendered; modify `args.Content` to customize
`ValueChange`	`ValueChangeEventArgs`	Fires when pointer value changes (user drag or programmatic); provides `Value` , `PointerIndex` , `AxisIndex`
`TooltipRendering`	`TooltipRenderEventArgs`	Fires before tooltip displays; customize `args.Content`
`DragStart`	`PointerDragEventArgs`	Fires when user starts dragging pointer; provides `CurrentValue` , `PointerIndex` , `AxisIndex`
`DragMove`	`PointerDragEventArgs`	Fires continuously during pointer drag; provides current value
`DragEnd`	`PointerDragEventArgs`	Fires when user releases pointer after drag
`AnimationComplete`	`AnimationCompleteEventArgs`	Fires when pointer animation completes
`ResizeCompleted`	`ResizeEventArgs`	Fires after gauge is resized; provides `CurrentSize` , `PreviousSize`
`OnGaugeMouseDown`	`MouseEventArgs`	Fires on mouse down on gauge
`OnGaugeMouseLeave`	`MouseEventArgs`	Fires when mouse leaves gauge
`OnGaugeMouseUp`	`MouseEventArgs`	Fires on mouse up on gauge
`Print`	`PrintEventArgs`	Fires before printing

Enums

Orientation - Gauge layout direction

csharp

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

Position - Element positioning relative to axis

csharp

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

PointerType - Type of value indicator

csharp

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

MarkerType - Shape of marker pointer

csharp

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

Placement - Pointer position relative to axis

csharp

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

ContainerType - Container shape

csharp

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

ExportType - Export format

csharp

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

TooltipPosition - Tooltip placement

csharp

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

Theme - Predefined color themes

csharp

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

Async Methods: All component methods (
```
SetPointerValueAsync
```
,
```
SetAnnotationValueAsync
```
,
```
RefreshAsync
```
,
```
PrintAsync
```
,
```
ExportAsync
```
) are asynchronous and must be awaited.
Export Prerequisites: Ensure
```
AllowPdfExport="true"
```
,
```
AllowImageExport="true"
```
, or
```
AllowPrint="true"
```
on the gauge before calling corresponding export or print methods.
Animation: Set
```
AnimationDuration="0"
```
for instant updates, or higher values for smooth animated transitions.
Event Arguments: Event handler arguments are provided by the framework and contain context-specific information (e.g.,
```
ValueChangeEventArgs
```
contains the new value).
Index-Based Access: When using
```
SetPointerValueAsync
```
or
```
SetAnnotationValueAsync
```
, use zero-based indices for axes, pointers, and annotations.
Performance: For frequent updates (e.g., every 100ms), consider batching updates or using
```
AnimationDuration="0"
```
to avoid animation overhead.
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):

```
SfLinearGauge
```
- Main component
```
LinearGaugeAnnotation
```
- Annotation element
```
LinearGaugeAnnotationFont
```
- Annotation font styling
```
LinearGaugeAnnotations
```
- Annotation collection
```
LinearGaugeAxes
```
- Axis collection
```
LinearGaugeAxis
```
- Axis configuration
```
LinearGaugeAxisLabelFont
```
- Axis label font
```
LinearGaugeAxisLabelStyle
```
- Axis label styling
```
LinearGaugeBorder
```
- Gauge border
```
LinearGaugeBorderSettings
```
- Border settings
```
LinearGaugeContainer
```
- Container configuration
```
LinearGaugeContainerBorder
```
- Container border
```
LinearGaugeEvents
```
- Event handlers
```
LinearGaugeFontSettings
```
- Font configuration
```
LinearGaugeLine
```
- Axis line
```
LinearGaugeLinearGradient
```
- Linear gradient
```
LinearGaugeMajorTicks
```
- Major tick marks
```
LinearGaugeMargin
```
- Margin settings
```
LinearGaugeMarginSettings
```
- Margin configuration
```
LinearGaugeMarkerTextStyle
```
- Marker text styling
```
LinearGaugeMinorTicks
```
- Minor tick marks
```
LinearGaugePointer
```
- Pointer element
```
LinearGaugePointerBorder
```
- Pointer border
```
LinearGaugePointers
```
- Pointer collection
```
LinearGaugeRadialGradient
```
- Radial gradient
```
LinearGaugeRange
```
- Range element
```
LinearGaugeRangeBorder
```
- Range border
```
LinearGaugeRangeTooltipBorder
```
- Range tooltip border
```
LinearGaugeRangeTooltipSettings
```
- Range tooltip
```
LinearGaugeRangeTooltipTextStyle
```
- Range tooltip text
```
LinearGaugeRanges
```
- Range collection
```
LinearGaugeTickSettings
```
- Tick configuration
```
LinearGaugeTitleStyle
```
- Title styling
```
LinearGaugeTooltipBorder
```
- Tooltip border
```
LinearGaugeTooltipSettings
```
- Tooltip configuration
```
LinearGaugeTooltipTextStyle
```
- Tooltip text styling
```
LinearGradient
```
- Linear gradient definition
```
RadialGradient
```
- Radial gradient definition
```
ColorStop
```
- Gradient color stop
```
ColorStops
```
- Gradient color stops collection
```
Point
```
- Pointer type enum
```
GradientPosition
```
- Gradient position
```
InnerPosition
```
- Inner gradient position
```
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

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

For Customization

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

For Interactivity

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

For Production

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

Next Steps

New to Linear Gauge? Start with getting-started.md
Need specific feature? Navigate to the relevant reference file based on your requirement
Building dashboard? Combine multiple patterns and refer to appearance-and-styling.md
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.

syncfusion-blazor-linear-gauge

NPX Install

Tags

SKILL.md Content

Implementing Syncfusion Blazor Linear Gauges

When to Use This Skill

Component Overview

Documentation and Navigation Guide

Getting Started

Core Components

Axes Configuration

Pointers

Ranges

Appearance and Styling

Annotations

Appearance and Styling

Advanced Features

Methods and Events

User Interaction

Accessibility and Internationalization

Quick Start Example

Common Patterns

Pattern 1: Simple Progress Indicator

Pattern 2: Multi-Scale Dashboard Gauge

Pattern 3: Interactive Value Adjuster

Pattern 4: Styled Thermometer

API Reference

SfLinearGauge

LinearGaugeAxes & LinearGaugeAxis

Axis Line & Ticks

Axis Labels

LinearGaugePointers & LinearGaugePointer

Pointer Styling

LinearGaugeRanges & LinearGaugeRange

LinearGaugeAnnotations & LinearGaugeAnnotation

Gradient Configuration

Container & Border Styling

Tooltip Configuration

Events & Event Arguments

Enums

Primary Component Hierarchy

Practical API Usage Notes

Complete Component List

Common Use Cases

1. Dashboard KPI Display

2. Temperature Monitoring

3. Progress Tracking

4. Speedometer/Tachometer

5. Sensor Data Visualization

6. Survey/Rating Display

7. Budget vs. Actual

8. Stock/Inventory Levels

Tips for Implementation

When Starting

For Customization

For Interactivity

For Production

Next Steps