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

Advanced Features

Table of Contents

• Print and Export
• Export to PNG
• Export to PDF
• Export to SVG
• Print the Gauge
• Programmatic Export with Custom Filename
• Annotations
• Adding Text Annotations
• Annotation Properties
• HTML Content in Annotations
• Animations
• Enable/Disable Animations
• Animation on Pointer
• Range Animation
• Internationalization (i18n)
• Number Formatting for Different Locales
• Custom Locale Strings
• Currency Formatting
• Date/Time in Annotations
• Right-to-Left (RTL) Support
• Enable RTL
• Accessibility (WCAG)
• Semantic HTML and ARIA
• Keyboard Navigation
• Color Contrast
• Focus Management
• Migration from ej1
• Breaking Changes from ej1 to ej2+
• Migration Example
• Feature Mapping
• Migration Checklist

Print and Export

Export to PNG

Export gauge as a PNG image:

export class ExportGaugeComponent {
  @ViewChild('gauge') gaugeRef: LinearGaugeComponent;

  exportToPNG(): void {
    if (this.gaugeRef) {
      this.gaugeRef.export('PNG', 'LinearGauge');
    }
  }
}

Template:

<button (click)="exportToPNG()">Export as PNG</button>

Export to PDF

Export gauge as a PDF document:

export class ExportPdfComponent {
  @ViewChild('gauge') gaugeRef: LinearGaugeComponent;

  exportToPDF(): void {
    if (this.gaugeRef) {
      this.gaugeRef.export('PDF', 'LinearGauge');
    }
  }
}

Export to SVG

Export as vector graphic (scalable):

exportToSVG(): void {
  if (this.gaugeRef) {
    this.gaugeRef.export('SVG', 'LinearGauge');
  }
}

Print the Gauge

Print directly to printer:

export class PrintGaugeComponent {
  @ViewChild('gauge') gaugeRef: LinearGaugeComponent;

  printGauge(): void {
    if (this.gaugeRef) {
      this.gaugeRef.print();
    }
  }
}

Programmatic Export with Custom Filename

export class CustomExportComponent {
  @ViewChild('gauge') gaugeRef: LinearGaugeComponent;

  exportWithTimestamp(format: string): void {
    const timestamp = new Date().toISOString().split('T')[0];
    const filename = `gauge-${timestamp}`;
    
    if (this.gaugeRef) {
      this.gaugeRef.export(format, filename);
    }
  }
}

Annotations

Adding Text Annotations

Add text labels to the gauge:

<ejs-lineargauge id="gauge-container">
    <e-annotations>
        <e-annotation zIndex='1' content='<div id="first"><h1>Gauge</h1></div>' x=100 y=-70 ></e-annotation>
    </e-annotations>
</ejs-lineargauge>

Annotation Properties

HTML Content in Annotations

htmlAnnotation = `
  <div style="padding: 5px; background: #f0f0f0; border-radius: 4px;">
    <strong>Status:</strong> <span style="color: #27ae60;">OK</span>
  </div>
`;

<e-annotation 
  [content]="htmlAnnotation"
  [x]=50
  [y]=20>
</e-annotation>

Animations

Enable/Disable Animations

<ejs-lineargauge animationDuration="3000">
  ...
</ejs-lineargauge>

Animation on Pointer

<e-pointer 
  [value]=50
  [type]="'Bar'"
  animationDuration="3000">
</e-pointer>

Range Animation

Animation is not supported for ranges.

<e-range 
  [start]=0 
  [end]=50
  [color]="'#3498db'"
</e-range>

Internationalization (i18n)

Number Formatting for Different Locales

import { setCulture, setCurrencyCode } from '@syncfusion/ej2-base';

setCulture('ar');
setCurrencyCode('QAR');

Custom Locale Strings

L10n.load({
  'de': {
    'lineargauge': {
      'range': 'Bereich'
    }
  },
  'fr': {
    'lineargauge': {
      'range': 'Plage'
    }
  }
});

Currency Formatting

// US English (USD)
labelStyle = {
  format: '${value}',
};

// German (EUR)
labelStyle = {
  format: '€{value}',
};

// French (EUR)
labelStyle = {
  format: '{value} €',
};

Date/Time in Annotations

const timestamp = new Date().toLocaleString('en-US', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit'
});

<e-annotation [content]="timestamp"></e-annotation>

Right-to-Left (RTL) Support

Enable RTL

<ejs-lineargauge [enableRtl]="true">
  ...
</ejs-lineargauge>

Component:

export class RTLGaugeComponent {
  enableRtl: boolean = true;
}

Accessibility (WCAG)

Semantic HTML and ARIA

Ensure gauge is accessible to screen readers:

<ejs-lineargauge 
  [title]="'System Temperature Monitor'">
  <e-axes>
    <e-axis [minimum]="0" [maximum]="100">
      <e-pointers>
        <e-pointer 
          [value]="currentTemp">
        </e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-lineargauge>

Keyboard Navigation

export class AccessibleGaugeComponent {
  gaugeValue: number = 50;

  onKeyDown(event: KeyboardEvent): void {
    const step = 5;
    
    switch(event.key) {
      case 'ArrowUp':
      case 'ArrowRight':
        this.gaugeValue = Math.min(100, this.gaugeValue + step);
        event.preventDefault();
        break;
      
      case 'ArrowDown':
      case 'ArrowLeft':
        this.gaugeValue = Math.max(0, this.gaugeValue - step);
        event.preventDefault();
        break;
    }
  }
}

Color Contrast

Ensure sufficient color contrast:

// High contrast colors for accessibility
const accessibleColors = {
  safe: '#006400',      // Dark green (>7:1 contrast)
  warning: '#FF8800',   // Dark orange (>4.5:1 contrast)
  danger: '#CC0000',    // Dark red (>4.5:1 contrast)
  text: '#000000'       // Black
};

Focus Management

export class FocusableGaugeComponent {
  @ViewChild('gauge') gaugeRef: LinearGaugeComponent;

  focusGauge(): void {
    if (this.gaugeRef) {
      // Ensure gauge can receive focus
      const element = this.gaugeRef.element;
      if (element) {
        element.tabIndex = 0;
        element.focus();
      }
    }
  }
}

Migration from ej1

Breaking Changes from ej1 to ej2+

Migration Example

ej1 (Old):

$(selector).ejLinearGauge({
  value: 50,
  orientation: 'Horizontal',
  pointers: [{ value: 50 }],
  ranges: [{ start: 0, end: 50, color: 'green' }]
});

ej2+ (New):

<ejs-lineargauge [orientation]="'Horizontal'">
  <e-axes>
    <e-axis [minimum]="0" [maximum]="100">
      <e-ranges>
        <e-range [start]="0" [end]="50" [color]="'green'"></e-range>
      </e-ranges>
      <e-pointers>
        <e-pointer [value]="50"></e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-lineargauge>

Feature Mapping

ej1 Property → ej2+ Property

pointerValue         → setPointerValue() method
rangeValue           → setRangeValue() method (if available)
labelFormat          → labelStyle.format
tickSize             → majorTicks.height / minorTicks.height
markerPointers       → e-pointers with type="Marker"

Migration Checklist

• [ ] Update module imports (LinearGaugeModule)
• [ ] Update template syntax (e-axes, e-ranges, e-pointers)
• [ ] Replace $().ejLinearGauge() with component binding
• [ ] Update property names to camelCase equivalents
• [ ] Update event handlers to Angular event binding syntax
• [ ] Test pointer animation and interaction behavior
• [ ] Verify theme CSS imports
• [ ] Test accessibility features
• [ ] Update print/export functionality

Linear Gauge API Reference

This document summarizes key properties, methods, and events for the LinearGaugeComponent with direct links to the official Syncfusion Angular API anchors.

• Base URL: https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/index-default

Properties

• allowImageExport — boolean
• allowMargin — boolean
• allowPdfExport — boolean
• allowPrint — boolean
• animationDuration — number
• annotations — [AnnotationModel[]](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotationmodel)
• axes — [AxisModel[]](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axismodel)
• background — string
• border — BorderModel
• container — ContainerModel
• description — string
• edgeLabelPlacement — LabelPlacement
• enablePersistence — boolean
• enableRtl — boolean
• format — string
• height — string
• locale — string
• margin — MarginModel
• orientation — Orientation
• rangePalettes — [string[]](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/index-default#rangepalettes)
• tabIndex — number
• theme — LinearGaugeTheme
• title / titleStyle — string / FontModel
• tooltip — TooltipSettingsModel
• useGroupingSeparator — boolean
• width — string

Methods

• destroy() — Destroy the gauge - Refer link
• export(type: ExportType, fileName: string, orientation?: PdfPageOrientation, allowDownload?: boolean) — Export gauge (returns Promise) - Refer link
• print(id?: string[]) — Print gauge element(s) - Refer link
• setAnnotationValue(annotationIndex: number, content: string | Function, axisValue?: number) — Set annotation value - Refer link
• setPointerValue(axisIndex: number, pointerIndex: number, value: number) — Set a pointer value - Refer link

Events

• animationComplete — IAnimationCompleteEventArgs
• annotationRender — IAnnotationRenderEventArgs
• axisLabelRender — IAxisLabelRenderEventArgs
• beforePrint — IPrintEventArgs
• dragEnd / dragMove / dragStart — IPointerDragEventArgs
• gaugeMouseDown / gaugeMouseLeave / gaugeMouseMove / gaugeMouseUp — IMouseEventArgs
• load / loaded — ILoadEventArgs / ILoadedEventArgs
• resized — IResizeEventArgs
• tooltipRender — ITooltipRenderEventArgs
• valueChange — IValueChangeEventArgs

--- Generated from: https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/index-default

Configuring Axes and Scales

Table of Contents

• Axis Overview
• Axis Properties
• Scale Configuration
• Setting Min and Max Values
• Opposed Position
• Tick Marks
• Tick Properties
• Examples
• Label Formatting
• Basic Labels
• Format Strings
• Font Styling
• Label Positioning
• Multiple Axes
• Advanced Axis Features
• Axis Line Style
• Dynamic Scale Updates
• Conditional Formatting
• Practical Examples
• Temperature Scale CelsiusFahrenheit
• Pressure Gauge Bar
• Percentage Scale

Axis Overview

The axis defines the scale of the Linear Gauge. It determines the minimum and maximum values displayed and how data is represented.

<e-axis [minimum]="0" 
        [maximum]="100"
        [opposedPosition]="false"
  <!-- Ranges, pointers, labels, ticks -->
</e-axis>

Axis Properties

Scale Configuration

Setting Min and Max Values

Define custom scale limits:

<e-axis [minimum]="0" [maximum]="50">
  <!-- For temperature in Celsius -->
</e-axis>

Opposed Position

Place the axis labels on the opposite side:

<ejs-lineargauge [orientation]="'Vertical'">
  <e-axes>
    <e-axis [minimum]="0" [maximum]="100" [opposedPosition]="true">
      <!-- Labels appear on right side instead of left -->
    </e-axis>
  </e-axes>
</ejs-lineargauge>

Tick Marks

Tick marks help users read the scale accurately. Configure major and minor ticks:

<e-axis [minimum]="0" [maximum]="100"
        [majorTicks]="majorTicks"
        [minorTicks]="minorTicks">
</e-axis>

// In component:
majorTicks = {
  interval: 20,
  width: 2,
  height: 8,
  color: '#333'
};

minorTicks = {
  interval: 5,
  width: 1,
  height: 5,
  color: '#999'
};

Tick Properties

Examples

Coarse scale (large intervals):

majorTicks = { interval: 50, height: 10 };
minorTicks = { interval: 10, height: 5 };

Fine scale (small intervals):

majorTicks = { interval: 10, height: 8 };
minorTicks = { interval: 2, height: 3 };

No minor ticks:

minorTicks = { interval: 0 }; // Disable minor ticks

Label Formatting

Basic Labels

Configure how axis values display:

<e-axis [minimum]="0" [maximum]="100"
        [labelStyle]="labelStyle">
</e-axis>

labelStyle = {
    font: {
      fontFamily: 'Arial',
      size: '12px',
      color: '#333'
    },
    offset: -10,
};

Format Strings

Add units or custom formatting:

// Temperature with degree symbol
labelStyle = {
  format: '{value}°C'
};

// Currency
labelStyle = {
  format: '${value}k'
};

// Percentage
labelStyle = {
  format: '{value}%'
};

// Custom decimal places
labelStyle = {
  format: '{value:.2f}'
};

Font Styling

Customize label appearance:

labelStyle = {
  font: {
    fontFamily: 'Georgia, serif',
    size: '14px',
    color: '#2c3e50',
    fontStyle: 'italic',
    fontWeight: 'bold',
    opacity: 1
  }
};

Label Positioning

Control label placement:

labelStyle = {
   position: "Cross"
};

Multiple Axes

Display multiple independent scales on the same gauge:

<ejs-lineargauge [orientation]="'Horizontal'">
  <e-axes>
    <!-- First axis (Celsius) -->
    <e-axis [minimum]="0" [maximum]="50"
            [labelStyle]="{ format: '{value}°C' }"
            [axisLabelRenderEventArgs]="onAxisLabelRender">
      <e-pointers>
        <e-pointer [value]="30"></e-pointer>
      </e-pointers>
    </e-axis>
    
    <!-- Second axis (Fahrenheit) -->
    <e-axis [minimum]="32" [maximum]="122"
            [labelStyle]="{ format: '{value}°F' }"
            [opposedPosition]="true">
      <e-pointers>
        <e-pointer [value]="86" [color]="'#ff6600'"></e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-lineargauge>

Advanced Axis Features

Axis Line Style

Customize the axis line itself:

<e-axis [minimum]="0" [maximum]="100"
        [line]="axisLine">
</e-axis>

axisLine = {
  width: 2,
  color: '#333',
};

Dynamic Scale Updates

Update axis range based on data:

export class GaugeComponent implements OnInit {
  @ViewChild('gauge') gaugeRef: LinearGaugeComponent;
  
  updateScale(newMin: number, newMax: number): void {
    // Change axis range programmatically
    this.gaugeRef.axes[0].minimum = newMin;
    this.gaugeRef.axes[0].maximum = newMax;
    this.gaugeRef.refresh();
  }
}

Conditional Formatting

Adjust axis properties based on current value:

onAxisLabelRender(args: any): void {
  if (parseInt(args.text) > 70) {
    args.labelStyle.font.color = '#e74c3c'; // Red for high values
  } else if (parseInt(args.text) > 40) {
    args.labelStyle.font.color = '#f39c12'; // Orange for medium
  } else {
    args.labelStyle.font.color = '#27ae60'; // Green for low
  }
}

Practical Examples

Temperature Scale (Celsius/Fahrenheit)

export class TemperatureGaugeComponent {
  celsiusAxis = {
    minimum: -50,
    maximum: 50,
    labelStyle: { format: '{value}°C' },
    majorTicks: { interval: 10 },
    minorTicks: { interval: 2 }
  };
  
  fahrenheitAxis = {
    minimum: -58,
    maximum: 122,
    labelStyle: { format: '{value}°F' },
    majorTicks: { interval: 20 },
    minorTicks: { interval: 5 },
    opposedPosition: true
  };
}

Pressure Gauge (Bar)

<e-axis [minimum]="0" [maximum]="10"
        [labelStyle]="{ format: '{value} bar' }"
        [majorTicks]="{ interval: 1, height: 10 }"
        [minorTicks]="{ interval: 0.5, height: 5 }">
</e-axis>

Percentage Scale

<e-axis [minimum]="0" [maximum]="100"
        [labelStyle]="{ format: '{value}%' }"
        [majorTicks]="{ interval: 25 }"
        [minorTicks]="{ interval: 5 }">
</e-axis>

Customization and Appearance

Table of Contents

• Container Styling
• Container Properties
• Container Types
• Sizing
• Color Schemes and Themes
• Built-in Themes
• Custom Color Palette
• Range Colors
• Font and Label Customization
• Label Styling
• Font Properties
• Format Examples
• Font Sizing Responsive
• Borders and Effects
• Axis Border
• Dashed Axis Line
• Range Borders
• Background and Gradients
• Solid Background
• Custom Templates
• Pointer Image Template
• Label Template
• Range Template with Labels
• Practical Examples
• Professional Dashboard Gauge
• Minimal Clean Gauge

Container Styling

Container Properties

The container holds the entire gauge and can be customized:

<ejs-lineargauge [container]="containerConfig">
  ...
</ejs-lineargauge>

containerConfig = {
  width: '100',
  height: '200px',
  type: 'Normal',
  border: {
    color: '#ddd',
    width: 2
  },
  backgroundColor: '#f5f5f5'
};

Container Types

Normal: Standard rectangular container

type: 'Normal'

RoundedRectangle: Rounded corners

type: 'RoundedRectangle'

Sizing

// Fixed size
containerConfig = {
  width: '500', //type -> number
  height: '150' //type -> number
};

Color Schemes

Custom Color Palette

Override theme colors:

/* In component styles */
::ng-deep .e-gauge {
  --primary-color: #0066cc;
  --secondary-color: #ff6600;
  --danger-color: #e74c3c;
  --success-color: #27ae60;
  --warning-color: #f39c12;
}

Range Colors

Use semantic color naming:

statusColors = {
  'critical': '#e74c3c',   // Red
  'warning': '#f39c12',    // Orange
  'normal': '#27ae60',     // Green
  'info': '#3498db'        // Blue
};

<e-ranges>
  <e-range [start]="0" [end]="30" [color]="statusColors.critical"></e-range>
  <e-range [start]="30" [end]="70" [color]="statusColors.warning"></e-range>
  <e-range [start]="70" [end]="100" [color]="statusColors.normal"></e-range>
</e-ranges>

Font and Label Customization

Label Styling

labelStyle = {
  font: {
    fontFamily: 'Arial, sans-serif',
    size: '14px',
    color: '#333',
    fontStyle: 'normal',
    fontWeight: 'normal'
  },
  format: '{value}',
  offset: 0,
};

Font Properties

Format Examples

// Temperature
labelStyle = { format: '{value}°C' };

// Currency
labelStyle = { format: '${value}K' };

// Percentage
labelStyle = { format: '{value}%' };

// Custom decimal places
labelStyle = { format: '{value:.2f}' };

// Thousands separator
labelStyle = { format: '{value:n0}' };

Font Sizing Responsive

export class ResponsiveGaugeComponent {
  getLabelSize(): string {
    const width = window.innerWidth;
    return width < 768 ? '10px' : '14px';
  }

  labelStyle = {
    font: {
      size: this.getLabelSize()
    }
  };

  ngOnInit(): void {
    window.addEventListener('resize', () => {
      this.labelStyle.font.size = this.getLabelSize();
    });
  }
}

Borders and Effects

Axis Border

<e-axis [line]="axisLine">
  ...
</e-axis>

axisLine = {
  width: 2,
  color: '#333',
  dashArray: '0' // Solid line
};

Dashed Axis Line

axisLine = {
  width: 1,
  color: '#999',
  dashArray: '5,5' // 5px dash, 5px gap
};

Range Borders

<e-range 
  [start]="0" 
  [end]="50" 
  [color]="'#3498db'"
  [border]="{ 
    color: '#1a1a1a', 
    width: 2 
  }">
</e-range>

Background and Gradients

Solid Background

containerConfig = {
  backgroundColor: '#f5f5f5'
};

Custom Templates

Pointer Image Template

Use custom images as pointers:

<ejs-lineargauge [pointerEventArgs]="onPointerRender">
  <e-axes>
    <e-axis>
      <e-pointers>
        <e-pointer 
          [value]="50" 
          [type]="'Marker'"
          [markerType]="'Image'"
          [imageUrl]="'assets/pointer-arrow.png'"
          [width]="30"
          [height]="30">
        </e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-lineargauge>

Label Template

Custom label rendering:

export class CustomLabelGaugeComponent {
  onAxisLabelRender(args: any): void {
    // Modify label based on value
    const value = parseInt(args.text);
    
    if (value > 70) {
      args.labelStyle.font.color = '#e74c3c';
      args.text = `${value}⚠️`;
    } else if (value > 40) {
      args.labelStyle.font.color = '#f39c12';
    } else {
      args.labelStyle.font.color = '#27ae60';
    }
  }
}

Range Template with Labels

export class RangeTemplateComponent {
  ranges = [
    { start: 0, end: 30, label: 'Low', color: '#27ae60' },
    { start: 30, end: 70, label: 'Med', color: '#f39c12' },
    { start: 70, end: 100, label: 'High', color: '#e74c3c' }
  ];
}

Practical Examples

Professional Dashboard Gauge

export class DashboardGaugeComponent {
  containerConfig = {
    width: '100',
    height: '200',
    type: 'RoundedRectangle',
    border: { color: '#ddd', width: 1 }
  };

  labelStyle = {
    font: {
      fontFamily: 'Segoe UI, sans-serif',
      size: '12px',
      color: '#4a4a4a',
      fontWeight: '500'
    },
    format: '{value}%'
  };

  ranges = [
    { start: 0, end: 30, color: '#e74c3c' },
    { start: 30, end: 70, color: '#f39c12' },
    { start: 70, end: 100, color: '#27ae60' }
  ];
}

Minimal Clean Gauge

export class MinimalGaugeComponent {
  containerConfig = {
    width: '100',
    height: '120',
    backgroundColor: '#fafafa'
  };

  axisLine = {
    width: 1,
    color: '#e0e0e0'
  };

  labelStyle = {
    font: {
      size: '11px',
      color: '#999'
    }
  };
}

Dimensions and Responsive Design

Configure gauge sizing for different screen sizes and container layouts. Ensure the Linear Gauge scales appropriately across devices while maintaining visual quality.

Table of Contents

• Container Sizing
• Fixed Dimensions
• Responsive Design
• Viewport-Based Sizing
• CSS Media Queries
• Dimension Properties
• Gauge Dimension Control
• Element Sizing
• Mobile Optimization
• Mobile-First Approach
• Touch-Friendly Sizing
• Multi-Gauge Layouts
• Stacked Gauges (Vertical)
• Side-by-Side Gauges (Horizontal)
• Practical Examples
• Dashboard with Responsive Gauges
• Fullscreen Gauge
• Vertical Linear Gauge

Container Sizing

Fixed Dimensions

Set explicit width and height:

<ejs-lineargauge [container]="containerConfig">
  ...
</ejs-lineargauge>

containerConfig = {
  width: '500', // type -> number
  height: '150', // type -> number
  type: 'Normal'
};

Responsive Design

Viewport-Based Sizing

Adjust gauge size based on screen width:

export class ResponsiveGaugeComponent implements OnInit, OnDestroy {
  containerConfig: any = {};
  private resizeListener: any;

  ngOnInit(): void {
    this.updateSizeOnResize();
    this.resizeListener = window.addEventListener('resize', () => {
      this.updateSizeOnResize();
    });
  }

  ngOnDestroy(): void {
    if (this.resizeListener) {
      window.removeEventListener('resize', this.resizeListener);
    }
  }

  updateSizeOnResize(): void {
    const width = window.innerWidth;
    
    if (width < 480) {
      // Mobile
      this.containerConfig = { width: '100', height: '120' };
    } else if (width < 768) {
      // Tablet
      this.containerConfig = { width: '100', height: '150' };
    } else {
      // Desktop
      this.containerConfig = { width: '100', height: '200' };
    }
  }
}

CSS Media Queries

@media (max-width: 480px) {
  ::ng-deep .e-gauge {
    height: 120px !important;
  }
}

@media (max-width: 768px) {
  ::ng-deep .e-gauge {
    height: 150px !important;
  }
}

@media (min-width: 769px) {
  ::ng-deep .e-gauge {
    height: 200px !important;
  }
}

Dimension Properties

Gauge Dimension Control

export class GaugeDimensionComponent {
  // Width options
  gaugeWidth: number = 500;
  widthUnit: 'px' | '%' = 'px';

  // Height options
  gaugeHeight: number = 150;
  heightUnit: 'px' = 'px';

  get containerConfig(): any {
    return {
      width: `${this.gaugeWidth}${this.widthUnit}`,
      height: `${this.gaugeHeight}${this.heightUnit}`
    };
  }

  updateDimensions(width: number, height: number): void {
    this.gaugeWidth = width;
    this.gaugeHeight = height;
  }
}

Element Sizing

export class ElementSizingComponent {
  labelSize: number = 12;
  tickSize: number = 8;
  pointerWidth: number = 15;
  rangeWidth: number = 15;

  getLabelStyle(): any {
    return {
      font: { size: `${this.labelSize}px` }
    };
  }

  getMajorTickStyle(): any {
    return { height: this.tickSize };
  }
}

Mobile Optimization

Mobile-First Approach

export class MobileOptimizedComponent {
  containerConfig: any;

  ngOnInit(): void {
    this.containerConfig = this.getMobileConfig();
    
    // Enhance for larger screens
    if (window.innerWidth > 768) {
      this.containerConfig = this.getDesktopConfig();
    }
  }

  getMobileConfig(): any {
    return {
      width: '100%',
      height: '120px',
      border: { width: 0 },
      backgroundColor: 'transparent'
    };
  }

  getDesktopConfig(): any {
    return {
      width: '100%',
      height: '180px',
      border: { color: '#ddd', width: 1 },
      backgroundColor: '#f5f5f5'
    };
  }

  getLabelsForMobile(): any {
    return {
      font: { size: '10px' }
    };
  }

  getLabelsForDesktop(): any {
    return {
      font: { size: '14px' }
    };
  }
}

Touch-Friendly Sizing

export class TouchFriendlyComponent {
  // Increase pointer width for easier touch interaction
  pointerWidth: number = this.isMobile() ? 30 : 15;

  isMobile(): boolean {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    );
  }

  getPointerConfig(): any {
    return {
      width: this.pointerWidth,
      type: 'Bar'
    };
  }
}

Multi-Gauge Layouts

Stacked Gauges (Vertical)

<div class="gauge-stack">
  <div class="gauge-item">
    <h3>CPU Usage</h3>
    <ejs-lineargauge [container]="{ width: '100', height: '100' }">
      ...
    </ejs-lineargauge>
  </div>
  
  <div class="gauge-item">
    <h3>Memory Usage</h3>
    <ejs-lineargauge [container]="{ width: '100', height: '100' }">
      ...
    </ejs-lineargauge>
  </div>
</div>

<style>
  .gauge-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .gauge-item {
    flex: 1;
  }
</style>

Side-by-Side Gauges (Horizontal)

<div class="gauge-grid">
  <div class="gauge-item">
    <ejs-lineargauge [container]="{ width: '100', height: '150' }">
      ...
    </ejs-lineargauge>
  </div>
  
  <div class="gauge-item">
    <ejs-lineargauge [container]="{ width: '100', height: '150' }">
      ...
    </ejs-lineargauge>
  </div>
</div>

<style>
  .gauge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }

  @media (max-width: 768px) {
    .gauge-grid {
      grid-template-columns: 1fr;
    }
  }
</style>

Practical Examples

Dashboard with Responsive Gauges

export class DashboardComponent {
  containerConfigs: any[] = [];

  ngOnInit(): void {
    this.updateLayout();
    window.addEventListener('resize', () => this.updateLayout());
  }

  updateLayout(): void {
    const width = window.innerWidth;
    
    if (width < 576) {
      // Mobile: Single column
      this.containerConfigs = [
        { width: '100%', height: '100px' }
      ];
    } else if (width < 992) {
      // Tablet: 2 columns
      this.containerConfigs = [
        { width: '100%', height: '120px' },
        { width: '100%', height: '120px' }
      ];
    } else {
      // Desktop: 3 columns
      this.containerConfigs = [
        { width: '100%', height: '150px' },
        { width: '100%', height: '150px' },
        { width: '100%', height: '150px' }
      ];
    }
  }
}

Fullscreen Gauge

export class FullscreenGaugeComponent {
  @ViewChild('gaugeContainer') container: ElementRef;
  isFullscreen: boolean = false;

  toggleFullscreen(): void {
    if (!this.isFullscreen) {
      this.container.nativeElement.requestFullscreen();
      this.isFullscreen = true;
    } else {
      document.exitFullscreen();
      this.isFullscreen = false;
    }
  }

  getFullscreenContainer(): any {
    return {
      width: '100%',
      height: '100%'
    };
  }
}

Vertical Linear Gauge

<ejs-lineargauge [orientation]="'Vertical'" 
                 [container]="{ width: '100', height: '300' }">
  ...
</ejs-lineargauge>

Vertical gauges are ideal for monitoring values that increase from bottom to top (temperature, altitude, etc.).

Getting Started with Linear Gauge

This guide will help you install, import, and create your first Linear Gauge component in an Angular application.

Table of Contents

• Installation
• Step 1: Install via NPM
• Step 2: Register the Module
• Step 3: Add CSS Theme
• Creating Your First Gauge
• Basic Example
• Component Structure
• Container Properties
• Axes Configuration
• Ranges
• Pointers
• Labels
• Complete Working Example

Installation

Step 1: Install via NPM

npm install @syncfusion/ej2-angular-lineargauge

Step 2: Register the Module

In your app.module.ts, import and register the Linear Gauge module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LinearGaugeAllModule } from '@syncfusion/ej2-angular-lineargauge';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LinearGaugeModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creating Your First Gauge

Basic Example

Create a simple horizontal gauge with a single range and pointer:

import { Component } from '@angular/core';

@Component({
  selector: 'app-gauge',
  template: `
    <ejs-lineargauge>
      <e-axes>
        <e-axis [minimum]="0" [maximum]="100">
          <e-ranges>
            <e-range [start]="0" [end]="30" [color]="'red'"></e-range>
            <e-range [start]="30" [end]="70" [color]="'yellow'"></e-range>
            <e-range [start]="70" [end]="100" [color]="'green'"></e-range>
          </e-ranges>
          <e-pointers>
            <e-pointer [value]="45"></e-pointer>
          </e-pointers>
        </e-axis>
      </e-axes>
    </ejs-lineargauge>
  `,
  styles: [`
    ::ng-deep .e-gauge {
      display: flex;
      justify-content: center;
    }
  `]
})
export class GaugeComponent { }

Component Structure

Container Properties

The gauge is contained within a configurable container:

<ejs-lineargauge [container]="containerConfig">
  ...
</ejs-lineargauge>

// In component class:
containerConfig = {
  width: '100',      // Container width (pixel)
  height: '150px',    // Container height in pixels
  type: 'Normal',      // 'Normal' or 'RoundedRectangle'
  backgroundColor: 'yellow',
  offset: 5,
  roundedCornerRadius: 5,
  border: {
    color: '#ddd',
    width: 2
  }
};

Axes Configuration

Each gauge contains axes that define the scale:

<e-axes>
  <e-axis [minimum]="0" 
          [maximum]="100" 
          [opposedPosition]="false">
    <!-- Ranges, pointers, annotations, labels -->
  </e-axis>
</e-axes>

Common axis properties:

• minimum: Scale start value (default: 0)
• maximum: Scale end value (default: 100)
• opposedPosition: Place axis on opposite side (boolean)
• isInversed: Enables or disables the inversed axis.
• labelStyle: Sets and gets the options for customizing the appearance of the label in axis.
• line: Sets and gets the options for customizing the appearance of the axis line.
• majorTicks: Sets and gets the options for customizing the major tick lines.
• minorTicks: Sets and gets the options for customizing the minor tick lines.
• pointers: Sets and gets the options for customizing the pointers of an axis.
• ranges: Sets and gets the options for customizing the ranges of an axis.
• showLastLabel: Shows or hides the last label in the axis of the linear gauge.

Ranges

Ranges are colored regions that indicate different value zones:

<e-ranges>
  <e-range 
    [start]="0" 
    [end]="30" 
    [color]="'#F6B53F'"
    [offset]="10"
    [startWidth]="15"
    [endWidth]="15">
  </e-range>
</e-ranges>

Range properties:

• start: Range start value
• end: Range end value
• color: CSS color or hex value
• offset: Distance from axis (pixels)
• startWidth: Width at range start
• endWidth: Width at range end
• border: Customize the style properties of the border for the axis range.
• linearGradient: Render a linear gradient for the range.
• position: Position to place the ranges in the axis.
• radialGradient: Render a radial gradient for the range.

Pointers

Pointers display the current value on the scale:

<e-pointers>
  <e-pointer 
    [value]="50" 
    [type]="'Bar'"
    [color]="'#0066cc'"
    [width]="15"
    [offset]="5">
  </e-pointer>
</e-pointers>

Pointer properties:

• value: Current value (between minimum and maximum)
• type: 'Bar' (rectangular) or 'Marker' (circular/image)
• color: Pointer color
• width: Pointer thickness
• offset: Distance from axis
• animationDuration: Sets and gets the duration of animation in pointer
• border: Sets and gets the options to customize the style properties of the border for pointers.
• description: Sets and gets the description for the pointer.
• enableDrag: Enables or disables the drag movement of pointer to update the pointer value.
• height: Sets and gets the height of the pointer.
• imageUrl: Sets and gets the URL path for the image in marker when the marker type is set as image.
• linearGradient: Sets and gets the properties to render a linear gradient for the pointer.
• markerType: Sets and gets the type of the marker for pointers in axis.
• opacity: Sets and gets the opacity of pointer in linear gauge.
• placement: Sets and gets the place of the pointer.
• position: Sets and gets the position of the pointer.
• radialGradient: Sets and gets the properties to render a radial gradient for the pointer.
• roundedCornerRadius: Sets and gets the corner radius for pointer.
• text: Specifies the text that will be displayed as the pointer in Linear Gauge. To display the text pointer, the markerType property must be set to Text.
• textStyle: Defines the font properties such as font-size, font family and others for the text pointer.
• type: Sets and gets the type of pointer in axis. There are two types of pointers: Marker and Bar.
• value: Sets and gets the value of the pointer in axis.
• width: Sets and gets the width of the pointer.

Labels

Configure axis labels:

<e-axis [labelStyle]="labelStyle">
  ...
</e-axis>

labelStyle = {
  font: {
    fontFamily: 'Arial',
    size: '12px',
    color: '#666'
  },
  format: '{value}°C',
  margin: { top: 5, bottom: 5 }
};

Complete Working Example

import { Component } from '@angular/core';

@Component({
  selector: 'app-gauge-demo',
  template: `
    <div class="gauge-container">
      <h2>System Health Monitor</h2>
      <ejs-lineargauge 
        [orientation]="'Horizontal'"
        [container]="{ width: '100', height: '200px' }">
        <e-axes>
          <e-axis [minimum]="0" [maximum]="100"
                  [labelStyle]="labelStyle"
                  [majorTicks]="{ interval: 20 }"
                  [minorTicks]="{ interval: 5 }">
            <e-ranges>
              <e-range [start]="0" [end]="40" [color]="'#27ae60'" ></e-range>
              <e-range [start]="40" [end]="70" [color]="'#f39c12'" ></e-range>
              <e-range [start]="70" [end]="100" [color]="'#e74c3c'" ></e-range>
            </e-ranges>
            <e-pointers>
              <e-pointer [value]="currentHealth" [type]="'Bar'" [width]="20" [color]="'#2c3e50'"></e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-lineargauge>
    </div>
  `,
  styles: [`
    .gauge-container {
      padding: 20px;
      font-family: Arial, sans-serif;
    }
  `]
})
export class GaugeDemoComponent {
  currentHealth = 65;
  labelStyle = {
    font: {
      fontFamily: 'Arial',
      size: '14px',
      color: '#333'
    },
    format: '{value}%'
  };
}

Interaction and Events

Handles user interactions with the Linear Gauge, including mouse events, drag operations, and dynamic value updates. Enable users to modify gauge values through interaction while providing real-time feedback.

Table of Contents

• Event Types
• Gauge Events
• Drag Interactions
• Enable Draggable Pointers
• Click Events
• Handle Gauge Mouse down
• Event Callbacks
• Change Events
• Form Integration
• Two-Way Binding with Input
• Dynamic Value Updates
• Real-time Value Updates
• Update from API
• Advanced Interactions
• Value Validation
• Snap to Grid
• Multiple Interaction Modes
• Practical Examples
• Temperature Control Interface
• Volume Control
• Speed Monitor with Alerts

Event Types

Gauge Events

<ejs-lineargauge 
  (gaugeMouseDown)="onPointerDown($event)"
  (gaugeMouseUp)="onPointerUp($event)"
  (gaugeMouseMove)="onPointerMove($event)"
  (dragStart)="onDragStart($event)"
  (dragMove)="onDragMove($event)"
  (dragEnd)="onDragEnd($event)">
  <!-- ... axes and pointers ... -->
</ejs-lineargauge>

Drag Interactions

Enable Draggable Pointers

Allow users to drag pointers to change values:

@Component({
imports: [
         LinearGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    template: `
    <ejs-lineargauge style="display:block" id="gauge-container" (dragStart)='dragStart($event)'>
        <e-axes>
         <e-axis>
           <e-pointers>
             <e-pointer enableDrag=true></e-pointer>
           </e-pointers>
         </e-axis>
      </e-axes>
    </ejs-lineargauge>`
})
export class AppComponent {
    dragStart(args: IPointerDragEventArgs) {
    }
}

@Component({
imports: [
         LinearGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    template: `
    <ejs-lineargauge style="display:block" id="gauge-container" (dragMove)='dragMove($event)'>
        <e-axes>
         <e-axis>
           <e-pointers>
             <e-pointer enableDrag=true></e-pointer>
           </e-pointers>
         </e-axis>
      </e-axes>
    </ejs-lineargauge>`
})
export class AppComponent {
    dragMove(args: IPointerDragEventArgs) {
    }
}

Template:

@Component({
imports: [
         LinearGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    template: `
    <ejs-lineargauge style="display:block" id="gauge-container" (dragEnd)='dragEnd($event)'>
        <e-axes>
         <e-axis>
           <e-pointers>
             <e-pointer enableDrag=true></e-pointer>
           </e-pointers>
         </e-axis>
      </e-axes>
    </ejs-lineargauge>`
})
export class AppComponent {
    dragEnd(args: IPointerDragEventArgs) {
    }
}

Click Events

Handle Gauge Mouse down

Respond when user mouse down on the gauge:

@Component({
imports: [
         LinearGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    template: `
    <ejs-lineargauge id="gauge-container" (gaugeMouseDown)='gaugeMouseDown($event)'>
    </ejs-lineargauge>`
})
export class AppComponent {
    gaugeMouseDown(args: IMouseEventArgs) {
    }
}

Event Callbacks

Change Events

export class EventCallbackComponent implements OnInit {
  @ViewChild('gauge') gaugeRef: LinearGaugeComponent;

  ngOnInit(): void {
    // Listen for resize events
    window.addEventListener('resize', () => this.onWindowResize());
  }

  onPointerValueChange(event: any): void {
    console.log('Pointer value changed:', event.value);
    this.emitValueChange(event.value);
  }

  onWindowResize(): void {
    if (this.gaugeRef) {
      this.gaugeRef.refresh();
    }
  }

  emitValueChange(newValue: number): void {
    // Emit to parent component
    console.log('Emitting new value:', newValue);
  }
}

Form Integration

Two-Way Binding with Input

export class FormIntegratedGaugeComponent {
  gaugeValue: number = 50;

  updateGaugeFromInput(inputValue: string): void {
    const numValue = parseFloat(inputValue);
    if (!isNaN(numValue) && numValue >= 0 && numValue <= 100) {
      this.gaugeValue = numValue;
    }
  }

  updateInputFromGauge(gaugeValue: number): void {
    this.inputValue = gaugeValue.toString();
  }
}

Dynamic Value Updates

Real-time Value Updates

Simulate live data:

export class RealtimeGaugeComponent implements OnInit, OnDestroy {
  @ViewChild('gauge') gaugeRef: LinearGaugeComponent;
  gaugeValue: number = 50;
  private updateInterval: any;

  ngOnInit(): void {
    this.startSimulation();
  }

  ngOnDestroy(): void {
    if (this.updateInterval) {
      clearInterval(this.updateInterval);
    }
  }

  startSimulation(): void {
    this.updateInterval = setInterval(() => {
      // Simulate fluctuating value
      const change = (Math.random() - 0.5) * 10;
      this.gaugeValue = Math.max(0, Math.min(100, this.gaugeValue + change));
      
      if (this.gaugeRef) {
        this.gaugeRef.setPointerValue(0, 0, this.gaugeValue);
      }
    }, 500);
  }

  stopSimulation(): void {
    if (this.updateInterval) {
      clearInterval(this.updateInterval);
    }
  }
}

Update from API

export class ApiDataGaugeComponent implements OnInit {
  @ViewChild('gauge') gaugeRef: LinearGaugeComponent;
  gaugeValue: number = 0;

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.loadGaugeValue();
    // Poll for updates
    setInterval(() => this.loadGaugeValue(), 5000);
  }

  loadGaugeValue(): void {
    this.dataService.getValue().subscribe(
      (value: number) => {
        this.gaugeValue = value;
        if (this.gaugeRef) {
          this.gaugeRef.setPointerValue(0, 0, value);
        }
      },
      (error: any) => console.error('Error loading gauge value:', error)
    );
  }
}

Advanced Interactions

Value Validation

Validate user input:

export class ValidatedGaugeComponent {
  gaugeValue: number = 50;
  minValue: number = 0;
  maxValue: number = 100;

  dragEnd(args: IPointerDragEventArgs): void {
    const newValue = event.currentValue;
    
    // Validate range
    if (newValue < this.minValue || newValue > this.maxValue) {
      console.warn('Value out of range');
      return; // Reject invalid value
    }

    // Additional validation logic
    if (!this.isValidValue(newValue)) {
      console.warn('Value failed validation');
      return;
    }

    this.gaugeValue = newValue;
  }

  isValidValue(value: number): boolean {
    // Custom validation logic
    return value % 5 === 0; // Only allow multiples of 5, for example
  }
}

Snap to Grid

Snap pointer to specific increments:

export class SnapToGridComponent {
  gaugeValue: number = 50;
  snapInterval: number = 10;

  dragEnd(args: IPointerDragEventArgs): void {
    // Snap to nearest interval
    const snappedValue = Math.round(event.currentValue / this.snapInterval) * this.snapInterval;
    this.gaugeValue = Math.max(0, Math.min(100, snappedValue));
  }
}

Multiple Interaction Modes

export class MultiModeGaugeComponent {
  gaugeValue: number = 50;
  interactionMode: 'drag' | 'click' | 'input' = 'drag';

  setValue(newValue: number): void {
    this.gaugeValue = Math.max(0, Math.min(100, newValue));
  }

  dragEnd(args: IPointerDragEventArgs): void {
    if (this.interactionMode === 'drag') {
      this.setValue(event.currentValue);
    }
  }

   gaugeMouseDown(args: IMouseEventArgs): void {
    if (this.interactionMode === 'click') {
      this.setValue(event.currentValue);
    }
  }

  updateFromInput(inputValue: string): void {
    if (this.interactionMode === 'input') {
      const numValue = parseFloat(inputValue);
      if (!isNaN(numValue)) {
        this.setValue(numValue);
      }
    }
  }
}

Practical Examples

Temperature Control Interface

export class TemperatureControlComponent {
  temperature: number = 22;
  targetTemperature: number = 22;

  dragEnd(args: IPointerDragEventArgs): void {
    this.targetTemperature = event.currentValue;
    this.sendToDevice(this.targetTemperature);
  }

  sendToDevice(temp: number): void {
    console.log(`Setting device temperature to ${temp}°C`);
    // API call to device
  }
}

Volume Control

export class VolumeControlComponent {
  volume: number = 50;

  dragEnd(args: IPointerDragEventArgs): void {
    this.volume = event.currentValue;
    this.updateAudioLevel(this.volume);
  }

  updateAudioLevel(level: number): void {
    // Update audio context
    console.log(`Volume set to ${level}%`);
  }
}

Speed Monitor with Alerts

export class SpeedMonitorComponent {
  currentSpeed: number = 60;
  maxSpeed: number = 100;
  alertThreshold: number = 80;

  onValueChange(newSpeed: number): void {
    this.currentSpeed = newSpeed;
    if (newSpeed > this.alertThreshold) {
      this.showSpeedAlert();
    }
  }

  showSpeedAlert(): void {
    console.warn('Speed exceeds threshold!');
    // Trigger visual/audio alert
  }
}

Ranges and Pointers

Table of Contents

• Understanding Ranges
• Creating Ranges
• Basic Range
• Range with Name
• Complete Range Configuration
• Range Styling
• Range Properties
• Offset and Width
• Border Styling
• Gradient Colors
• Understanding Pointers
• Pointer Types
• Bar Pointer
• Marker Pointer
• Pointer Styling
• Pointer Properties
• Styling Examples
• Multiple Pointers
• Animations
• Enabling Animations
• Animation Property
• Global Animation Configuration
• Dynamic Updates
• Updating Pointer Values
• Practical Examples
• Traffic Light Gauge
• Performance Gauge
• Dual Display

Understanding Ranges

Ranges are colored zones on the gauge that represent different value regions. They help users quickly identify whether a reading is in a safe, warning, or critical zone.

<e-ranges>
    <e-range [start]="0" [end]="30" [color]="'#27ae60'" ></e-range>
    <e-range [start]="30" [end]="70" [color]="'#f39c12'" ></e-range>
    <e-range [start]="70" [end]="100" [color]="'#e74c3c'" ></e-range>
</e-ranges>

Creating Ranges

Basic Range

Define a range with color:

<e-range 
  [start]="0" 
  [end]="50" 
  [color]="'#3498db'">
</e-range>

Range with Name

Add a label for reference:

<e-range 
  [start]="0" 
  [end]="50" 
  [color]="'#3498db'"
</e-range>

Complete Range Configuration

<e-range 
  [start]="20" 
  [end]="80" 
  [color]="'#9b59b6'"
  [offset]="10"
  [startWidth]="15"
  [endWidth]="15"
  [border]="{ color: '#fff', width: 2 }">
</e-range>

Range Styling

Range Properties

Offset and Width

Create ranges with visual depth:

// Range that tapers from top to bottom
<e-range 
  [start]="0" 
  [end]="50" 
  [color]="'#3498db'"
  [startWidth]="20"
  [endWidth]="10"
  [offset]="5">
</e-range>

// Range with custom offset
<e-range 
  [start]="50" 
  [end]="100" 
  [color]="'#e74c3c'"
  [offset]="-5">
</e-range>

Border Styling

Add borders to ranges:

<e-range 
  [start]="0" 
  [end]="50" 
  [color]="'#3498db'"
  [border]="{ color: '#1a1a1a', width: 2 }">
</e-range>

Gradient Colors

Use CSS gradients for visual appeal:

// Note: Use RGB/Hex colors for gradient support
<e-range 
  [start]="0" 
  [end]="100" 
  [color]="'linear-gradient(to right, #3498db, #2ecc71)'"
  [startWidth]="20"
  [endWidth]="20">
</e-range>

Understanding Pointers

Pointers display the current value on the gauge scale. They are the primary indicator of the measured value.

<e-pointers>
  <e-pointer [value]="45" [type]="'Bar'"></e-pointer>
</e-pointers>

Pointer Types

Bar Pointer

Rectangular bar that extends from the axis:

<e-pointer 
  [value]="50" 
  [type]="'Bar'"
  [width]="20"
  [color]="'#2c3e50'">
</e-pointer>

Use case: Temperature, speed, and general measurements.

Marker Pointer

Circular or custom-shaped marker at a specific value:

<e-pointer 
  [value]="50" 
  [type]="'Marker'"
  [markerType]="'Circle'"
  [width]="15"
  [color]="'#ff6600'">
</e-pointer>

Marker types: Circle, Triangle, Rectangle, Diamond, Inverted Triangle, Image

// Different marker shapes
<e-pointer [markerType]="'Circle'" [value]="25"></e-pointer>
<e-pointer [markerType]="'Triangle'" [value]="50"></e-pointer>
<e-pointer [markerType]="'Diamond'" [value]="75"></e-pointer>
<e-pointer [markerType]="'Rectangle'" [value]="100"></e-pointer>

Pointer Styling

Pointer Properties

Styling Examples

// Thick bar pointer
<e-pointer 
  [value]="60" 
  [type]="'Bar'"
  [width]="25"
  [color]="'#34495e'"
  [border]="{ color: '#fff', width: 2 }">
</e-pointer>

// Large circular marker
<e-pointer 
  [value]="40" 
  [type]="'Marker'"
  [markerType]="'Circle'"
  [width]="20"
  [color]="'#e74c3c'">
</e-pointer>

Multiple Pointers

Compare multiple values on the same gauge:

<e-pointers>
  <!-- Current value (bar pointer) -->
  <e-pointer 
    [value]="currentValue" 
    [type]="'Bar'"
    [color]="'#0066cc'"
    [width]="15">
  </e-pointer>
  
  <!-- Target value (marker pointer) -->
  <e-pointer 
    [value]="targetValue" 
    [type]="'Marker'"
    [markerType]="'Circle'"
    [color]="'#ff6600'"
    [width]="12">
  </e-pointer>
  
  <!-- Average value (marker pointer) -->
  <e-pointer 
    [value]="averageValue" 
    [type]="'Marker'"
    [markerType]="'Triangle'"
    [color]="'#27ae60'"
    [width]="10">
  </e-pointer>
</e-pointers>

Component code:

export class MultiPointerGaugeComponent {
  currentValue = 65;
  targetValue = 75;
  averageValue = 70;
}

Animations

Enabling Animations

Animate pointer movement:

<e-pointer animationDuration="1000"
    [value]="averageValue"  
    [type]="'Marker'"
    [markerType]="'Triangle'"
    [color]="'#27ae60'"
    [width]="10">
</e-pointer>

Animation Property

Global Animation Configuration

<ejs-lineargauge animationDuration="1000">
  ...
</ejs-lineargauge>

Dynamic Updates

Updating Pointer Values

Change pointer values programmatically:

export class InteractiveGaugeComponent implements OnInit {
  @ViewChild('gauge') gaugeRef: LinearGaugeComponent;
  gaugeValue: number = 50;

  ngOnInit(): void {
    this.simulateValueChange();
  }

  simulateValueChange(): void {
    setInterval(() => {
      this.gaugeValue = Math.random() * 100;
      this.updateGauge();
    }, 1000);
  }

  updateGauge(): void {
    if (this.gaugeRef) {
      this.gaugeRef.setPointerValue(0, 0, this.gaugeValue);
    }
  }
}

Practical Examples

Traffic Light Gauge

<ejs-lineargauge [orientation]="'Vertical'">
  <e-axes>
    <e-axis [minimum]="0" [maximum]="100">
      <e-ranges>
        <e-range [start]="0" [end]="30" [color]="'#27ae60'" ></e-range>
        <e-range [start]="30" [end]="70" [color]="'#f39c12'" ></e-range>
        <e-range [start]="70" [end]="100" [color]="'#e74c3c'"></e-range>
      </e-ranges>
      <e-pointers>
        <e-pointer [value]="trafficValue" [type]="'Marker'" [markerType]="'Circle'" [width]="25"></e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-lineargauge>

Performance Gauge

<e-ranges>
  <e-range [start]="0" [end]="40" [color]="'#e74c3c'" [startWidth]="15" [endWidth]="15"></e-range>
  <e-range [start]="40" [end]="70" [color]="'#f39c12'" [startWidth]="15" [endWidth]="15"></e-range>
  <e-range [start]="70" [end]="100" [color]="'#27ae60'" [startWidth]="15" [endWidth]="15"></e-range>
</e-ranges>
<e-pointers>
  <e-pointer [value]="performanceScore" [type]="'Bar'" [width]="20" [color]="'#2c3e50'" [animationDuration]="'800'" ></e-pointer>
</e-pointers>

Dual Display

<e-pointers>
  <!-- Main value -->
  <e-pointer 
    [value]="mainValue" 
    [type]="'Bar'"
    [width]="20"
    [color]="'#0066cc'"
    [offset]="10">
  </e-pointer>
  
  <!-- Secondary value for comparison -->
  <e-pointer 
    [value]="secondaryValue" 
    [type]="'Bar'"
    [width]="15"
    [color]="'#999'"
    [offset]="-10">
  </e-pointer>
</e-pointers>