syncfusion-angular-linear-gauge

# Implementing Syncfusion Angular Linear Gauge The Linear Gauge is a component used to visualize measurements and metrics on a linear scale. It displays values in a horizontal or vertical bar with ranges, pointers, and labels for clear data representation. ## When to Use This Skill - **Creating a gauge component**: Display scalar values on a linear scale - **Measurement interfaces**: Show temperature, pressure, speed, or other metrics - **Adding ranges**: Define colored zones for different value ranges - **Configuring pointers**: Show multiple values with different pointer styles - **Customizing appearance**: Modify colors, fonts, backgrounds, and animations - **Handling interactions**: Add click, drag, or hover events - **Adding annotations**: Include text or images to enhance the gauge - **Exporting and printing**: Generate PNG, PDF, or SVG outputs - **International support**: Enable i18n and RTL support - **Accessibility**: Ensure WCAG compliance for accessible interfaces ## Documentation and Navigation Guide Choose your reference based on what you need to accomplish: ### API Reference 📄 **Read:** [references/api-reference.md](references/api-reference.md) ### Getting Started 📄 **Read:** [references/getting-started.md](references/getting-started.md) - Installation and npm package setup - Importing Linear Gauge module - Creating your first gauge component - CSS theme imports - Basic configuration ### Configuring Axes and Scales 📄 **Read:** [references/axis-and-scales.md](references/axis-and-scales.md) - Axis properties and range setup - Scale configuration and limits - Major and minor tick marks - Label formatting and positioning - Multiple axes on a single gauge ### Adding Ranges and Pointers 📄 **Read:** [references/ranges-and-pointers.md](references/ranges-and-pointers.md) - Creating and styling ranges - Range animations and offsets - Pointer types (marker and bar) - Pointer animations and transitions - Drag-enabled pointers for user input - Multiple pointers on one gauge ### Customization and Appearance 📄 **Read:** [references/customization-and-appearance.md](references/customization-and-appearance.md) - Container styling and sizing - Color schemes and theme application - Font and label customization - Borders and shadow effects - Background and gradient styling - Custom label templates ### Interaction and Events 📄 **Read:** [references/interaction-and-events.md](references/interaction-and-events.md) - Mouse event handling - Click, hover, and drag interactions - Event callbacks and listeners - Form integration patterns - Dynamic value updates from user input ### Advanced Features 📄 **Read:** [references/advanced-features.md](references/advanced-features.md) - Print and export functionality (PNG, PDF, SVG) - Annotations for additional information - Animation configuration and timing - Internationalization (i18n) setup - Right-to-left (RTL) text support - WCAG accessibility compliance - Migrating from ej1 to ej2/ej3 ### Responsive Design and Dimensions 📄 **Read:** [references/dimensions-and-responsive.md](references/dimensions-and-responsive.md) - Container sizing and responsive layouts - Dimension properties - Print layout considerations - Mobile-friendly gauge design ## Quick Start ```typescript import { Component, OnInit } from '@angular/core'; import { LinearGaugeAllModule } from '@syncfusion/ej2-angular-gauges'; @Component({ selector: 'app-linear-gauge', template: ` <ejs-lineargauge [orientation]="'Horizontal'" [container]="{ width: '100', height: '150' }"> <e-axes> <e-axis [minimum]="0" [maximum]="100" [majorTicks]="majorTicks" [minorTicks]="minorTicks"> <e-ranges> <e-range [start]="0" [end]="30" [color]="'#F6B53F'"></e-range> <e-range [start]="30" [end]="70" [color]="'#0DC451'"></e-range> <e-range [start]="70" [end]="100" [color]="'#F64C38'"></e-range> </e-ranges> <e-pointers> <e-pointer [value]="45" [type]="'Bar'"></e-pointer> </e-pointers> </e-axis> </e-axes> </ejs-lineargauge> ` }) export class LinearGaugeComponent implements OnInit { majorTicks = { interval: 20 }; minorTicks = { interval: 5 }; ngOnInit(): void { // Component initialized } } ``` ## Common Patterns ### Pattern 1: Temperature Gauge Display current temperature with hot/cold zones. ```typescript <e-axis [minimum]="0" [maximum]="50"> <e-ranges> <e-range [start]="0" [end]="15" [color]="'#3498db'" ></e-range> <e-range [start]="15" [end]="30" [color]="'#2ecc71'" ></e-range> <e-range [start]="30" [end]="50" [color]="'#e74c3c'" ></e-range> </e-ranges> <e-pointers> <e-pointer [value]="currentTemp" [type]="'Marker'"></e-pointer> </e-pointers> </e-axis> ``` ### Pattern 2: Interactive Gauge Allow users to drag the pointer to change values. ```typescript <e-pointer [value]="gaugeValue" [type]="'Bar'" enableDrag=true [markerType]="'Circle'" (dragEnd)='dragEnd($event)'> </e-pointer> dragEnd(args: IPointerDragEventArgs): void { this.gaugeValue = event.currentValue; console.log('Gauge value changed to:', this.gaugeValue); } ``` ### Pattern 3: Multiple Pointers Compare multiple values on the same scale. ```typescript <e-pointers> <e-pointer [value]="actualValue" [type]="'Bar'" [color]="'#0066cc'"></e-pointer> <e-pointer [value]="targetValue" [type]="'Marker'" [color]="'#ff6600'"></e-pointer> </e-pointers> ``` ## Key Props and Configuration | Property | Type | Purpose | |----------|------|---------| | `orientation` | 'Horizontal' \| 'Vertical' | Direction of the gauge | | `container.width` | number | Gauge width (e.g., '100', '300') | | `container.height` | number | Gauge height (e.g., '150') | | `axes[].minimum` | number | Minimum value on scale | | `axes[].maximum` | number | Maximum value on scale | | `ranges[].start` | number | Range start value | | `ranges[].end` | number | Range end value | | `ranges[].color` | string | Range color (hex or named) | | `pointers[].value` | number | Current pointer value | | `pointers[].type` | 'Bar' \| 'Marker' | Pointer visual style | | `animationDuration` | number | Enable pointer animations, if greater than 0 | | `print()` | method | Export as PNG/PDF |