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

Getting Started

📄 Read: 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

• 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

• 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

• 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

• 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

• 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

• Container sizing and responsive layouts
• Dimension properties
• Print layout considerations
• Mobile-friendly gauge design

Quick Start

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.

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

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

<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