syncfusion-aspnetcore-lineargauge

Implementing Syncfusion Linear Gauge

When to Use This Skill

Use this skill when you need to:

• Display numerical values in a linear gauge format (temperature, speed, performance metrics)
• Create interactive gauges with draggable pointers
• Visualize ranges and thresholds on a linear scale
• Add annotations and custom elements to gauges
• Implement dashboard gauges with real-time data updates
• Build thermometer-style or progress indicator components

Component Overview

The Linear Gauge component visualizes numerical values of an axis in a linear manner. All elements are rendered using Scalable Vector Graphics (SVG). Key features include:

• Multiple pointers - Support for Marker and Bar pointer types
• Range highlighting - Define color ranges to highlight value zones
• Annotations - Add text, images, or HTML elements anywhere on the gauge
• Interactive features - Drag-and-drop pointers, tooltips, and events
• Animations - Smooth pointer animations on load and value changes
• Customization - Colors, themes, borders, scales, and container types (Normal, RoundedRectangle, Thermometer)
• Accessibility - WCAG 2.2 compliance with screen reader support
• Print & Export - Print and export gauge images

Quick Start Example

Here's a minimal Linear Gauge implementation:

<!-- ASP.NET Core Tag Helper -->
<ejs-lineargauge id="linear" title="Temperature Gauge" orientation="Horizontal">
    <e-lineargauge-axes>
        <e-lineargauge-axis minimum="0" maximum="200">
            <e-lineargauge-ranges>
                <e-lineargauge-range start="0" end="50" color="blue"></e-lineargauge-range>
                <e-lineargauge-range start="50" end="150" color="green"></e-lineargauge-range>
                <e-lineargauge-range start="150" end="200" color="red"></e-lineargauge-range>
            </e-lineargauge-ranges>
            <e-lineargauge-pointers>
                <e-lineargauge-pointer value="75" type="Bar"></e-lineargauge-pointer>
            </e-lineargauge-pointers>
        </e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>

Common Patterns

Pattern 1: Temperature Display

• Vertical orientation with thermometer container
• Range colors: blue (cold), green (normal), red (hot)
• Single bar pointer for current temperature

Pattern 2: Progress Indicator

• Horizontal orientation with percentage values
• Single range from 0-100
• Bar pointer showing completion percentage

Pattern 3: Dashboard Metric

• Horizontal orientation with multiple ranges
• Marker pointers for actual vs target values
• Annotations for labels and notes

Pattern 4: Real-Time Monitoring

• Event binding to ValueChange event
• Pointer animation with specified duration
• Tooltip for hover information

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Basic linear gauge implementation
• CSS imports and theme configuration
• Initial configuration and rendering

Gauge Dimensions

📄 Read: references/gauge-dimensions.md

• Container size and dimensions (pixel vs percentage)
• Orientation (horizontal/vertical)
• Sizing configurations
• Responsive behavior and margin control

Ranges and Values

📄 Read: references/ranges-and-values.md

• Range definitions and colors
• Multiple ranges configuration
• Value binding and axis scaling
• Minimum/maximum values
• Range styling and gradient colors

Pointers and Indicators

📄 Read: references/pointers-and-indicators.md

• Pointer types and styles (Marker, Bar)
• Marker shapes (Circle, Rectangle, Triangle, Diamond, Image, Text)
• Animation and movement
• Multiple pointers
• Pointer styling and customization

Appearance and Styling

📄 Read: references/appearance-and-styling.md

• Visual customization
• Container types (Normal, RoundedRectangle, Thermometer)
• Colors and themes
• Title styling
• Borders and scales
• Label customization

Interactions and Events

📄 Read: references/interactions-and-events.md

• Click events and drag operations
• Value change events
• Animation complete events
• Mouse events (down, move, up, leave)
• Tooltip rendering and handling

Annotations

📄 Read: references/annotations.md

• Adding text and image annotations
• Positioning annotations (x, y coordinates)
• Z-index and layering
• Horizontal and vertical alignment
• Multiple annotations

Advanced Features

📄 Read: references/advanced-features.md

• Accessibility (WCAG 2.2, screen readers)
• Print and export functionality
• Internationalization (i18n)
• API methods and properties
• RTL support

Examples and Use Cases

📄 Read: references/examples-and-use-cases.md

• Dashboard gauges
• Speed indicators
• Temperature displays
• Performance metrics
• Real-world patterns and best practices