Syncfusion Angular Circular Gauge

Implementing Syncfusion Angular Circular Gauge

Table of Contents

• When to Use This Skill
• Component Overview
• Documentation and Navigation Guide
• Quick Start Example
• Common Patterns
• Key Concepts

When to Use This Skill

Use the Circular Gauge skill when you need to:

• Display radial metrics: Temperature, RPM, speed, pressure, or performance indicators
• Build dashboards: KPI dashboards, monitoring systems, real-time data visualization
• Create speedometer gauges: Visual representation of continuous values within a range
• Show progress or status: Multi-step processes, completion percentages, status indicators
• Implement interactive gauges: Draggable pointers, range indicators, user-controlled values
• Customize gauge appearance: Multiple styles, themes, animations, and layout options

Component Overview

Syncfusion's Circular Gauge component provides a flexible, feature-rich control for displaying radial data visualization. Key capabilities include:

Documentation and Navigation Guide

Select the reference that matches your current need:

-### API Reference 📄 Read: references/api-reference.md

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup (Ivy and ngcc versions)
• Module registration and service providers
• Basic gauge implementation
• Setting pointer values
• Quick integration examples

When to read: First time setup, installation issues, basic gauge rendering

Axes Configuration

📄 Read: references/axes-configuration.md

• Axis customization (line style, background, colors)
• Angles and direction (clockwise/anticlockwise, start/end angles)
• Axis radius (pixel-based and percentage-based sizing)
• Ticks configuration (major/minor ticks, position, offset, styling)
• Labels (font, positioning, formats, angle rotation, smart label handling)
• Minimum/maximum value ranges
• Multiple axes on single gauge

When to read: Configuring gauge layout, adjusting tick/label appearance, positioning elements

Pointers and Types

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

• Pointer types overview (Needle, RangeBar, Marker)
• Needle pointers (radius, cap customization, tail length, width variation)
• RangeBar pointers (bar-style indicators, rounded corners)
• Marker pointers (shapes: circle, rectangle, triangle, diamond; custom images)
• Pointer dragging (global enable/disable, individual pointer configuration)
• Multiple pointers on single axis
• Pointer animation (enable, duration, timing)
• Gradient colors (linear and radial gradients)

When to read: Choosing pointer type, customizing pointer appearance, adding user interaction

Ranges and Styling

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

• Range basics (start/end values, colored zones)
• Range customization (color, thickness, radius)
• Multiple ranges on single axis
• Rounded corner radius for visual polish
• Range positioning (inside/outside axis)
• Range dragging functionality
• Gradient support (linear and radial)
• Applying range colors to ticks and labels

When to read: Adding colored zones, creating layered visualizations, styling zones

Appearance and Animation

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

• Gauge title (text, font styling, positioning)
• Gauge positioning (centerX, centerY in pixels or percentage)
• Background and border customization
• Margin and spacing configuration
• Gauge dimensions (responsive sizing, fixed dimensions)
• Animation (global animationDuration for all elements, pointer-specific animation)
• Radius calculation for semi/quarter circular gauges
• Creating non-circular gauge layouts

When to read: Styling gauge container, enabling animations, creating themed displays

Annotations and Interaction

📄 Read: references/annotations-and-interaction.md

• Annotations (custom HTML/elements, positioning via radius and angle)
• Sub-gauges (nested gauges within annotations)
• Tooltips (hover information, custom tooltip content)
• User interaction events (pointer drag, value change, gauge interaction)
• Print and export functionality
• Internationalization and localization
• Accessibility features (WCAG compliance, keyboard navigation)

When to read: Adding custom content, handling user interactions, accessible gauge implementation

Quick Start Example

Basic Circular Gauge with Single Pointer:

import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-circulargauge';
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  imports: [CircularGaugeModule],
  providers: [GaugeTooltipService],
  standalone: true,
  selector: 'app-gauge',
  template: `
    <ejs-circulargauge id='gauge-container' [title]='title'>
      <e-axes>
        <e-axis [startAngle]='200' [endAngle]='160' [minimum]='0' [maximum]='100'>
          <e-pointers>
            <e-pointer [value]='75' type='Needle'></e-pointer>
          </e-pointers>
        </e-axis>
      </e-axes>
    </ejs-circulargauge>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  title = 'Speed Gauge';
}

Steps: 1. Install package: npm install @syncfusion/ej2-angular-circulargauge 2. Import CircularGaugeModule in component 3. Add services if needed (GaugeTooltipService, etc.) 4. Configure ejs-circulargauge with axes and pointers 5. Set pointer value and type

Common Patterns

Pattern 1: Speedometer Display

Create a speedometer gauge with ranges indicating speed zones (safe, warning, danger):

// Basic structure:
<ejs-circulargauge>
  <e-axes>
    <e-axis [minimum]='0' [maximum]='200'>
      <!-- Green range (0-80): Safe -->
      <!-- Yellow range (80-150): Caution -->
      <!-- Red range (150-200): Danger -->
      <e-ranges>
        <e-range [start]='0' [end]='80' color='green'></e-range>
        <e-range [start]='80' [end]='150' color='orange'></e-range>
        <e-range [start]='150' [end]='200' color='red'></e-range>
      </e-ranges>
      <e-pointers>
        <e-pointer [value]='speedValue' type='Needle'></e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-cirulargauge>

Reference: ranges-and-styling.md (multiple ranges), pointers-and-types.md (needle pointer)

Pattern 2: Multiple Metrics with Multiple Axes

Display multiple related metrics (inner and outer axes) simultaneously:

// Configure multiple axes:
<e-axes>
  <e-axis [radius]='60%'><!-- Outer axis --></e-axis>
  <e-axis [radius]='40%'><!-- Inner axis --></e-axis>
</e-axes>

Reference: axes-configuration.md (multiple axes section)

Pattern 3: Interactive Gauge with Draggable Pointers

Allow users to adjust values by dragging the pointer:

// Enable dragging globally or per-pointer:
<ejs-circulargauge [enablePointerDrag]='true'>
  <!-- or per-pointer: -->
  <e-pointer [enableDrag]='true'></e-pointer>
</ejs-circulargauge>

Reference: pointers-and-types.md (dragging pointer section)

Pattern 4: Animated Gauge Load

Add smooth entrance animations when gauge loads:

// Enable animation for all elements:
<ejs-circulargauge [animationDuration]='2000'>
  <!-- Entire gauge animates in over 2 seconds -->
</ejs-circulargauge>

Reference: appearance-and-animation.md (animation section)

Key Concepts

Angles and Direction

The circular gauge rotates in a circular plane. You control the visible arc using:

• startAngle: Beginning of the arc (default: 200°)
• endAngle: End of the arc (default: 160°)
• direction: ClockWise or AntiClockWise

This lets you create full circles (0-360°) or partial gauges (semi-circles, quarter-circles).

Radius and Sizing

Gauges use flexible sizing:

• Pixel-based: Fixed size (e.g., 500px)
• Percentage-based: Relative to container (e.g., 80%)

Set radius on axes, ranges, pointers, and annotations independently.

Pointers vs Ranges

• Pointers: Show a specific value (like a speedometer needle)
• Ranges: Show zones or intervals (like color-coded areas)

Use together for rich visualizations (e.g., pointer shows current speed, ranges show safe/warning zones).

Animations

Animation affects: 1. Axis line rendering (follows direction) 2. Ticks and labels 3. Ranges 4. Pointers (individual control available) 5. Annotations

Set animationDuration in milliseconds (0 = disabled).

Multiple Pointers & Axes

Support n+ pointers and axes:

• Multiple pointers: Show different metrics (humidity + temperature)
• Multiple axes: Layers of information (inner/outer rings)

Each axis has independent ranges, pointers, and styling.

---

Ready to implement? Start with getting-started.md for installation, then navigate to feature-specific references as needed.

Annotations and Interaction

Table of Contents

• Annotations Overview
• API Reference
• Basic Annotation
• Simple Text Annotation
• Annotation Positioning
• Angle Property
• Radius Property
• Combined: Positioning Examples
• Sub-Gauges
• Tooltips
• Enable Tooltip
• Tooltip Configuration
• User Interaction
• Handle Pointer Drag Events
• Handle Gauge Click
• Value Change Detection
• Print and Export
• Print Gauge
• Export as Image
• Internationalization
• Date/Number Localization
• Custom Localization
• Number Formats by Locale
• Accessibility
• WCAG Compliance
• Enable Accessibility
• Screen Reader Support
• High Contrast Theme
• Complete Interactive Example

Annotations Overview

API Reference

📄 Read: references/api-reference.md

Annotations allow you to place custom HTML elements, text, or shapes at specific positions on the gauge. Use them for labels, icons, status indicators, or nested gauges.

Common uses:

• Display unit labels (°C, mph, %)
• Show current/target value text
• Place status icons
• Embed sub-gauges for hierarchical data
• Display tooltips with context

Basic Annotation

Simple Text Annotation

import { AnnotationsService } from '@syncfusion/ej2-angular-circulargauge';

@Component({
  imports: [CircularGaugeModule],
  providers: [AnnotationsService],  // ← Required for annotations
  selector: 'app-gauge',
  template: `
    <ejs-circulargauge id="circular-container">
        <e-axes>
            <e-axis>
                <e-annotations>
                    <e-annotation zIndex='1'>
						          <ng-template #content>
							          <div>
							            <div><span>Pointer Value : 50</span>
                          </div>
                        </div>
                      </ng-template>
                    </e-annotation>
                </e-annotations>
            </e-axis>
        </e-axes>
    </ejs-circulargauge>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent { }

Result: "°C" text appears 110% from gauge center at 90° angle (right side).

Annotation Positioning

Angle Property

Position annotation around the gauge using angle (0-360°):

[angle]='0'    // Top
[angle]='90'   // Right
[angle]='180'  // Bottom
[angle]='270'  // Left

Radius Property

Distance from gauge center:

radius='50%'   // Inside: 50% of axis radius
radius='100%'  // On axis: at axis radius (default)
radius='150%'  // Outside: beyond axis radius

Combined: Positioning Examples

<!-- Top center -->
<e-annotation [angle]='0' radius='110%'></e-annotation>

<!-- Right side, outer -->
<e-annotation [angle]='90' radius='130%'></e-annotation>

<!-- Bottom center -->
<e-annotation [angle]='180' radius='110%'></e-annotation>

<!-- Left side, inner -->
<e-annotation [angle]='270' radius='70%'></e-annotation>

<!-- Top-right diagonal -->
<e-annotation [angle]='45' radius='120%'></e-annotation>

Sub-Gauges

Embed a gauge within another gauge to display hierarchical data:

export class AppComponent {
  subGaugeContent = `
    <ejs-circulargauge>
      <e-axes>
        <e-axis [minimum]='0' [maximum]='100'>
          <e-pointers>
            <e-pointer [value]='75' type='Needle'></e-pointer>
          </e-pointers>
        </e-axis>
      </e-axes>
    </ejs-circulargauge>
  `;
}

Limitation: Sub-gauges require manual DOM integration with Angular components.

Tooltips

Display information when user hovers over gauge elements.

Enable Tooltip

import { GaugeTooltipService } from '@syncfusion/ej2-angular-circulargauge';

@Component({
  imports: [CircularGaugeModule],
  providers: [GaugeTooltipService],  // ← Required for tooltips
  template: `
    <ejs-circulargauge id='gauge' [tooltip]='tooltip'>
      <!-- gauge content -->
    </ejs-circulargauge>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  tooltip = {
    enable: true,
    type: ['Pointer'],  // Show on pointer hover
    template: '<div>Value: ${value}</div>'  // Custom template
  };
}

Tooltip Configuration

tooltip = {
  enable: true,
  type: ['Pointer'],     // Tooltip on pointer
  showAtMousePosition: true,  // Show at mouse location
  format: 'Value: {value}',   // Format string
  textStyle: {
    color: '#FFFFFF',
    fontFamily: 'Arial',
    fontSize: '14px'
  }
};

User Interaction

Handle Pointer Drag Events

Detect when user drags pointer:

import { CircularGaugeComponent } from '@syncfusion/ej2-angular-circulargauge';

@Component({
  imports: [CircularGaugeModule],
  selector: 'app-gauge',
  template: `
    <ejs-circulargauge [enablePointerDrag]='true'
                       (dragMove)='onPointerMove($event)'>
      <!-- gauge content -->
    </ejs-circulargauge>
  `
})
export class AppComponent {
  onPointerMove(event: any) {
    console.log('Pointer value:', event.value);
    // Update external state, validate value, etc.
  }
}

Handle Gauge Click

Detect clicks on gauge elements:

export class AppComponent {
  onGaugeClick(event: any) {
    console.log('Gauge clicked at:', event.location);
    // Respond to user click
  }
}

Value Change Detection

React to pointer value changes:

<ejs-circulargauge (dragEnd)='onValueChange($event)'>
  <!-- gauge content -->
</ejs-circulargauge>

Component:

export class AppComponent {
  onValueChange(event: any) {
    this.currentValue = event.value;
    this.updateDisplay();
  }

  private updateDisplay() {
    if (this.currentValue > 80) {
      this.status = 'HIGH';
    } else if (this.currentValue > 50) {
      this.status = 'MEDIUM';
    } else {
      this.status = 'LOW';
    }
  }
}

Print and Export

Print Gauge

import { CircularGaugeComponent } from '@syncfusion/ej2-angular-circulargauge';
import { ViewChild } from '@angular/core';

@Component({
  selector: 'app-gauge',
  template: `
    <ejs-circulargauge id="circular-container" [allowPrint]=true #gauge>
    </ejs-circulargauge><div> <button id='print' (click)='print()'>Print</button></div>
  `,
   providers: [PrintService]
})
export class AppComponent {
   @ViewChild('gauge')
  public gaugeObj?: CircularGaugeComponent;
  ngOnInit(): void {
      // ngOnInit code here
    }

  public print(): void {
    (this.gaugeObj as any).print(); 
  }
}

Export as Image

export class AppComponent {
  @ViewChild('gauge') gauge: CircularGaugeComponent;

  exportGauge() {
    // Export as PNG
    this.gauge.export('PNG', 'gauge-image');
    
    // Export as PDF
    this.gauge.export('PDF', 'gauge-document');
    
    // Export as SVG
    this.gauge.export('SVG', 'gauge-vector');
  }
}

Template:

<ejs-circulargauge id="circular-container" [allowImageExport]=true #gauge>
    </ejs-circulargauge>
<button (click)='exportGauge()'>Export as Image</button>

Internationalization

Date/Number Localization

import { BrowserModule } from '@angular/platform-browser';
import { registerLocaleData } from '@angular/common';
import fr from '@angular/common/locales/fr';

registerLocaleData(fr);

@Component({
  selector: 'app-gauge',
  template: `
    <ejs-circulargauge [locale]="'fr'">
      <!-- Content displays in French -->
    </ejs-circulargauge>
  `
})
export class AppComponent { }

Custom Localization

import { L10n } from '@syncfusion/ej2-base';

// Define custom locale
L10n.load({
  'de': {
    'circulargauge': {
      'seriesType': 'Art',
      'performance': 'Leistung'
    }
  }
});

@Component({
  selector: 'app-gauge',
  template: `<ejs-circulargauge [locale]="'de'"></ejs-circulargauge>`
})
export class AppComponent { }

Number Formats by Locale

Different locales affect label formatting:

• en-US: 1,000.00 (comma separator)
• de-DE: 1.000,00 (period for thousands)
• fr-FR: 1 000,00 (space and comma)

Accessibility

WCAG Compliance

The Circular Gauge supports accessible features:

• Keyboard navigation: Tab through elements
• ARIA labels: Screen reader support
• High contrast: Visible in high-contrast themes
• Semantic HTML: Proper element structure

Enable Accessibility

@Component({
  selector: 'app-gauge',
  template: `
    <ejs-circulargauge id='gauge'
                       [ariaLabel]="'Performance gauge showing 65% usage'"
                       role='img'>
      <e-axes>
        <e-axis>
          <e-pointers>
            <e-pointer [value]='65' 
                       [ariaLabel]="'Current value 65 percent'">
            </e-pointer>
          </e-pointers>
        </e-axis>
      </e-axes>
    </ejs-circulargauge>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent { }

Screen Reader Support

// Descriptions for screen readers
ariaLabel = 'CPU Usage Gauge displaying real-time system performance';

// Pointer-specific descriptions
pointerAriaLabel = 'Current CPU usage 65 percent out of 100';

// Range descriptions
rangeAriaLabel = 'Warning zone from 75 to 90 percent usage';

High Contrast Theme

<!-- In styles.css or styles.scss -->
@import '@syncfusion/ej2-angular-circulargauge/styles/highcontrast.css';

Complete Interactive Example

import { GaugeTooltipService, AnnotationsService } from '@syncfusion/ej2-angular-circulargauge';
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { CircularGaugeComponent } from '@syncfusion/ej2-angular-circulargauge';

@Component({
  imports: [CircularGaugeModule],
  providers: [GaugeTooltipService, AnnotationsService],
  selector: 'app-gauge',
  template: `
    <div>
      <h3>{{ title }}</h3>
      <button (click)='printGauge()'>Print</button>
      <button (click)='exportAsImage()'>Export</button>
      <button (click)='resetValue()'>Reset</button>
      
      <ejs-circulargauge #gauge
                         [title]='title'
                         [enablePointerDrag]='true'
                         [tooltip]='tooltipConfig'
                         (dragMove)='onPointerMove($event)'
                         (dragEnd)='onValueChange($event)'
                         [animationDuration]='1500'>
        <e-axes>
          <e-axis [minimum]='0' [maximum]='100'>
            <e-ranges>
              <e-range [start]='0' [end]='40' color='#F44336'></e-range>
              <e-range [start]='40' [end]='70' color='#FFC107'></e-range>
              <e-range [start]='70' [end]='100' color='#4CAF50'></e-range>
            </e-ranges>
            <e-pointers>
              <e-pointer [value]='currentValue' type='Needle'>
              </e-pointer>
            </e-pointers>
          </e-axis>
        </e-axes>
        <e-annotations>
          <e-annotation [content]="statusDisplay" 
                        [angle]='180' 
                        radius='70%'></e-annotation>
        </e-annotations>
      </ejs-circulargauge>
      
      <p>Current: {{ currentValue }}% - {{ status }}</p>
    </div>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  @ViewChild('gauge') gauge: CircularGaugeComponent;

  title = 'System Performance';
  currentValue = 65;
  status = 'MEDIUM';
  
  tooltipConfig = {
    enable: true,
    type: ['Pointer'],
    format: 'Usage: {value}%'
  };

  get statusDisplay() {
    return `<div style='font-weight: bold; font-size: 16px;'>${this.status}</div>`;
  }

  onPointerMove(event: any) {
    console.log('Pointer moved:', event.value);
  }

  onValueChange(event: any) {
    this.currentValue = Math.round(event.value);
    this.updateStatus();
  }

  private updateStatus() {
    if (this.currentValue >= 70) {
      this.status = 'HIGH';
    } else if (this.currentValue >= 40) {
      this.status = 'MEDIUM';
    } else {
      this.status = 'LOW';
    }
  }

  printGauge() {
    this.gauge.print();
  }

  exportAsImage() {
    this.gauge.export('PNG', 'performance-gauge');
  }

  resetValue() {
    this.gauge.setPointerValue(0, 0, 50);
  }
}

---

Circular Gauge API Reference

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

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

Properties

• allowImageExport — boolean
• allowMargin — boolean
• allowPdfExport — boolean
• allowPrint — boolean
• allowRangePreRender — boolean
• animationDuration — number
• axes — [AxisModel[]](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axismodel)
• background — string
• border — BorderModel
• centerX — string
• centerY — string
• description — string
• enablePersistence — boolean
• enablePointerDrag — boolean
• enableRangeDrag — boolean
• enableRtl — boolean
• height — string
• legendSettings — LegendSettingsModel
• locale — string
• margin — MarginModel
• moveToCenter — boolean
• tabIndex — number
• theme — GaugeTheme
• 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(axisIndex: number, annotationIndex: number, content: string | Function) — Set annotation content - Refer link
• setPointerValue(axisIndex: number, pointerIndex: number, value: number) — Set pointer value - Refer link
• setRangeValue(axisIndex: number, rangeIndex: number, start: number, end: number) — Set range values - Refer link

Events

• animationComplete — IAnimationCompleteEventArgs
• annotationRender — IAnnotationRenderEventArgs
• axisLabelRender — IAxisLabelRenderEventArgs
• beforePrint — IPrintEventArgs
• dragEnd / dragMove / dragStart — IPointerDragEventArgs
• gaugeMouseDown / gaugeMouseLeave / gaugeMouseMove / gaugeMouseUp — IMouseEventArgs
• legendRender — ILegendRenderEventArgs
• load / loaded — ILoadedEventArgs
• radiusCalculate — IRadiusCalculateEventArgs
• resized — IResizeEventArgs
• tooltipRender — ITooltipRenderEventArgs

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

Appearance and Animation

Table of Contents

• Gauge Title
• Basic Title
• Title Styling
• Gauge Positioning
• Center Position Default
• Pixel-Based Positioning
• Percentage-Based Positioning
• Custom Positioning Examples
• Background and Border
• Background Color
• Border Styling
• Complete Styling
• Margin and Spacing
• Margin Configuration
• Asymmetric Margins
• Gauge Dimensions
• Animation
• Enable Global Animation
• Animation Sequence
• Pointer-Specific Animation
• Complete Animation Setup
• No Animation
• Non-Circular Gauges
• Semi-Circular Gauge Half Circle
• Quarter-Circular Gauge
• Custom Arc Range
• Direction Adjustment
• Semi-Gauge Dashboard Example
• Complete Styled Gauge Example

Gauge Title

Add a title to the gauge and customize its appearance.

Basic Title

<ejs-circulargauge [title]="'Speed Gauge'">
  <!-- gauge content -->
</ejs-circulargauge>

Title Styling

Customize title appearance with titleStyle:

export class AppComponent {
  titleStyle = {
    color: '#333333',
    fontFamily: 'Arial',
    fontStyle: 'Normal',
    fontWeight: '500',
    size: '18px',
    textAlignment: 'Center'
  };
}

Template:

<ejs-circulargauge [title]="'Performance Gauge'" [titleStyle]='titleStyle'>
</ejs-circulargauge>

Gauge Positioning

Position the gauge at specific locations within its container.

Center Position (Default)

<ejs-circulargauge centerX='50%' centerY='50%'>
  <!-- Centered in container (default) -->
</ejs-circulargauge>

Pixel-Based Positioning

Position at fixed pixel coordinates:

<ejs-circulargauge centerX='300' centerY='300'>
  <!-- Gauge center at 300px from left and top -->
</ejs-circulargauge>

Percentage-Based Positioning

Position relative to container dimensions:

<ejs-circulargauge centerX='25%' centerY='75%'>
  <!-- Gauge at bottom-left quadrant -->
</ejs-circulargauge>

Custom Positioning Examples

Top-Left:

<ejs-circulargauge centerX='20%' centerY='20%'></ejs-circulargauge>

Top-Right:

<ejs-circulargauge centerX='80%' centerY='20%'></ejs-circulargauge>

Bottom-Center:

<ejs-circulargauge centerX='50%' centerY='85%'></ejs-circulargauge>

Background and Border

Customize gauge container appearance.

Background Color

<ejs-circulargauge background='#F5F5F5'>
  <!-- Light gray background -->
</ejs-circulargauge>

Border Styling

export class AppComponent {
  borderStyle = {
    color: '#0074E3',
    width: 2
  };
}

Template:

<ejs-circulargauge [border]='borderStyle'></ejs-circulargauge>

Complete Styling

export class AppComponent {
  background = '#FFFFFF';
  
  borderStyle = {
    color: '#0074E3',
    width: 2
  };
}

Template:

<ejs-circulargauge [background]='background' [border]='borderStyle'>
</ejs-circulargauge>

Margin and Spacing

Add space around the gauge within its container.

Margin Configuration

export class AppComponent {
  margin = {
    left: 20,
    right: 20,
    top: 20,
    bottom: 20
  };
}

Template:

<ejs-circulargauge [margin]='margin'></ejs-circulargauge>

Asymmetric Margins

margin = {
  left: 50,      // More space on left
  right: 10,
  top: 30,       // More space on top
  bottom: 10
};

Gauge Dimensions

Control gauge sizing and responsiveness.

Animation

Animate gauge elements when loading or value changes.

Enable Global Animation

<ejs-circulargauge [animationDuration]='2000'>
  <!-- All elements animate over 2 seconds -->
</ejs-circulargauge>

Animation Sequence

Global animation applies in this order: 1. Axis line - Renders along direction 2. Ticks and labels - Fade/appear 3. Ranges - Fill animation 4. Pointers - Move to position 5. Annotations - Appear

Pointer-Specific Animation

Individual pointer animation (within global animation):

Template:

<e-pointer value=90 [animation]="animation"></e-pointer>

animation= {
    enable: true,
    duration: 1500
};

Complete Animation Setup

export class AppComponent {
  // Global animation for all elements
  animationDuration = 2000;  // milliseconds
}

Template:

<ejs-circulargauge [animationDuration]='animationDuration'>
  <e-axes>
    <e-axis>
      <e-pointers>
        <!-- Individual pointer animation overrides -->
        <e-pointer [value]='65' type='Needle' [animation]="animation">
        </e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-circulargauge>

Component:

animation= {
    enable: true,
    duration: 1500
};

No Animation

Disable animation for instant rendering:

<ejs-circulargauge [animationDuration]='0'>
  <!-- No animation (instant render) -->
</ejs-circulargauge>

Non-Circular Gauges

Create semi-circular, quarter-circular, and custom arc gauges.

Semi-Circular Gauge (Half Circle)

<ejs-circulargauge id='gauge'>
  <e-axes>
    <e-axis [startAngle]='0' [endAngle]='180'>
      <!-- 0° to 180° = half circle -->
      <e-pointers>
        <e-pointer [value]='50'></e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-circulargauge>

Use:

• Bottom-mounted dashboard displays
• Width-constrained layouts
• Battery level indicators

Quarter-Circular Gauge

<e-axis [startAngle]='0' [endAngle]='90'>
  <!-- 0° to 90° = quarter circle -->
</e-axis>

Use:

• Corner-mounted widgets
• Compact displays
• Mobile layouts

Custom Arc Range

<e-axis [startAngle]='45' [endAngle]='315'>
  <!-- 45° to 315° = 270° arc (3/4 circle) -->
</e-axis>

Direction Adjustment

Change measurement direction:

<e-axis [startAngle]='0' [endAngle]='180' [direction]="'AntiClockWise'">
  <!-- Values increase counter-clockwise -->
</e-axis>

Effect: For quarter/semi gauges, removes wasted space, makes gauge fill available area.

Semi-Gauge Dashboard Example

export class AppComponent {
  metrics = [
    { label: 'CPU', value: 65 },
    { label: 'Memory', value: 45 },
    { label: 'Disk', value: 78 }
  ];
}

Template:

<div style="width: 500px; height: 500px;">
    <ejs-circulargauge title="CPU">
      <e-axes>
        <e-axis
          [startAngle]="0"
          [endAngle]="180"
          [minimum]="0"
          [maximum]="100">

          <e-pointers>
            <e-pointer [value]="cpuValue" type="Needle"></e-pointer>
          </e-pointers>

        </e-axis>
      </e-axes>
    </ejs-circulargauge>
  </div>

  <!-- Memory Gauge -->
  <div style="width: 200px; height: 500px;">
    <ejs-circulargauge title="Memory">
      <e-axes>
        <e-axis
          [startAngle]="0"
          [endAngle]="180"
          [minimum]="0"
          [maximum]="100">

          <e-pointers>
            <e-pointer [value]="memoryValue" type="Needle"></e-pointer>
          </e-pointers>

        </e-axis>
      </e-axes>
    </ejs-circulargauge>
  </div>

  <!-- Disk Gauge -->
  <div style="width: 200px; height: 150px;">
    <ejs-circulargauge title="Disk">
      <e-axes>
        <e-axis
          [startAngle]="0"
          [endAngle]="180"
          [minimum]="0"
          [maximum]="100">

          <e-pointers>
            <e-pointer [value]="diskValue" type="Needle"></e-pointer>
          </e-pointers>

        </e-axis>
      </e-axes>
    </ejs-circulargauge>
  </div>

Complete Styled Gauge Example

Combines positioning, styling, and animation:

export class AppComponent {
  title = 'Performance Monitor';
  background = '#FFFFFF';
  
  titleStyle = {
    color: '#333333',
    fontFamily: 'Arial, sans-serif',
    fontWeight: '500',
    size: '16px'
  };

  borderStyle = {
    color: '#E0E0E0',
    width: 1
  };

  margin = {
    left: 15,
    right: 15,
    top: 15,
    bottom: 15
  };

  animationDuration = 2000;
  centerX = '50%';
  centerY = '50%';
}

Template:

<ejs-circulargauge [title]='title'
                   [titleStyle]='titleStyle'
                   [background]='background'
                   [border]='borderStyle'
                   [margin]='margin'
                   [animationDuration]='animationDuration'
                   [centerX]='centerX'
                   [centerY]='centerY'>
  <e-axes>
    <e-axis [minimum]='0' [maximum]='100'>
      <e-ranges>
        <e-range [start]='0' [end]='40' color='#F44336'></e-range>
        <e-range [start]='40' [end]='70' color='#FFC107'></e-range>
        <e-range [start]='70' [end]='100' color='#4CAF50'></e-range>
      </e-ranges>
      <e-pointers>
        <e-pointer [value]='65' type='Needle'>
        </e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-circulargauge>

---

Axes Configuration

Table of Contents

• Axis Customization
• Line Style
• Axis Background
• Angles and Direction
• Start and End Angles
• Direction
• Axis Radius
• Pixel-Based Radius
• Percentage-Based Radius
• Example: Responsive Gauge
• Ticks Configuration
• Major Ticks
• Minor Ticks
• Tick Position
• Complete Tick Configuration
• Labels
• Font Configuration
• Label Position
• Label Format
• Custom Label Format
• Smart Labels (Auto Angle)
• Hide Intersecting Labels
• Hide First/Last Label
• Minimum and Maximum Values
• Multiple Axes

Axis Customization

Line Style

Customize the axis line appearance using lineStyle property:

<e-axis [lineStyle]='lineStyle'>
  <e-pointers>
    <e-pointer [value]='50'></e-pointer>
  </e-pointers>
</e-axis>

Component:

export class AppComponent {
  lineStyle = {
    color: '#0074E3',     // Axis line color
    width: 3              // Axis line width in pixels
  };
}

Axis Background

Add background color to the axis area:

<e-axis background='#E8F0FF'>
  <!-- axis content -->
</e-axis>

Angles and Direction

Start and End Angles

Control the arc range using startAngle and endAngle:

<e-axis [startAngle]='200' [endAngle]='160'>
  <!-- Full arc: 200° to 160° = 320° visible -->
</e-axis>

Common configurations:

Direction

Set rotation direction with direction property:

<e-axis [direction]="'ClockWise'">
  <!-- Values increase clockwise -->
</e-axis>

Options:

• ClockWise - Values increase clockwise (default)
• AntiClockWise - Values increase counterclockwise

Axis Radius

Control the size of the gauge axis using radius property:

Pixel-Based Radius

Set fixed size in pixels:

<e-axis [radius]='200'>
  <!-- Gauge renders with 500px radius -->
</e-axis>

Percentage-Based Radius

Set size relative to container:

<e-axis [radius]='80%'>
  <!-- Gauge uses 80% of available container space -->
</e-axis>

Benefits of percentage:

• Responsive design (adapts to container size)
• Works across different screen sizes
• Maintains proportions

Example: Responsive Gauge

<ejs-circulargauge id='gauge'>
  <e-axes>
    <e-axis minimum=0 maximum=100 radius="90%">
      <e-pointers>
        <e-pointer [value]='65'></e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-circulargauge>

Ticks Configuration

Major Ticks

Major tick marks (larger marks) at intervals:

<e-axis [majorTicks]='majorTicks'>
  <!-- axis content -->
</e-axis>

Component:

export class AppComponent {
  majorTicks = {
    interval: 10,       // Tick every 10 units (0, 10, 20, 30...)
    height: 10,         // Tick mark height in pixels
    width: 2,           // Tick mark width
    color: '#333333'    // Tick color
  };
}

Minor Ticks

Minor tick marks (smaller marks) between major ticks:

<e-axis [minorTicks]='minorTicks'>
  <!-- axis content -->
</e-axis>

Component:

export class AppComponent {
  minorTicks = {
    interval: 2,        // Tick every 2 units
    height: 5,          // Smaller than major ticks
    width: 1,
    color: '#999999'
  };
}

Tick Position

Control tick placement with position and offset:

<ejs-circulargauge id="circular-container">
    <e-axes>
        <e-axis [majorTicks]="majorTicks" [minorTicks]="minorTicks"></e-axis>
    </e-axes>
</ejs-circulargauge>

Position options:

• Inside - Ticks on inside of axis (default)
• Outside - Ticks on outside of axis

Offset: Distance in pixels between axis line and tick mark (default: 0)

Complete Tick Configuration

export class AppComponent {
  majorTicks = {
    interval: 10,
    height: 12,
    width: 2,
    color: '#0074E3',
    position: 'Outside',
    offset: 8
  };

  minorTicks = {
    interval: 2,
    height: 6,
    width: 1,
    color: '#B0B0B0',
    position: 'Inside',
    offset: 0
  };
}

<e-axis [majorTicks]='majorTicks' [minorTicks]='minorTicks'></e-axis>

Labels

Font Configuration

Customize label appearance with labelStyle.font:

<e-axis [labelStyle]='labelStyle'>
  <!-- axis content -->
</e-axis>

Component:

export class AppComponent {
  labelStyle = {
    font: {
      fontFamily: 'Arial',
      fontStyle: 'Normal',
      fontWeight: '500',
      size: '14px',
      color: '#222222'
    }
  };
}

Label Position

Control label placement relative to axis:

<e-axis [labelStyle]='labelPosition'>
  <!-- axis content -->
</e-axis>

Component:

export class AppComponent {
  labelPosition = {
    position: 'Outside',  // 'Inside' or 'Outside'
    offset: 10,           // Distance from axis (pixels)
    autoAngle: false       // Rotate labels along axis
  };
}

Label Format

Format label values using format property:

<e-axis [labelStyle]="{ format: 'n1' }">
  <!-- Labels show as: 0.0, 20.0, 40.0... -->
</e-axis>

Format options:

Custom Label Format

<e-axis [labelStyle]="{ format: '{value}°C' }">
  <!-- Labels show as: 0°C, 20°C, 40°C... -->
</e-axis>

Smart Labels (Auto Angle)

Rotate labels along the axis for better readability:

<e-axis [labelStyle]="{ autoAngle: true }">
  <!-- Labels rotate to follow axis curve -->
</e-axis>

Hide Intersecting Labels

When labels overlap, automatically hide some:

<e-axis [hideIntersectingLabel]='true'>
  <!-- Overlapping labels are hidden -->
</e-axis>

Hide First/Last Label

In full circles, avoid first/last label overlap:

<e-axis [labelStyle]="{ hiddenLabel: 'First' }">
  <!-- First label hidden, prevents overlap at 0°/360° -->
</e-axis>

Options:

• 'First' - Hide first label
• 'Last' - Hide last label

Minimum and Maximum Values

Set the axis value range:

<e-axis [minimum]='0' [maximum]='200'>
  <!-- Axis displays 0 to 200 range -->
</e-axis>

Example: Temperature gauge (−40 to 120°C):

<e-axis [minimum]='-40' [maximum]='120'>
  <e-pointers>
    <e-pointer [value]='25'></e-pointer> <!-- 25°C -->
  </e-pointers>
</e-axis>

Multiple Axes

Add multiple axes to display layered data:

<ejs-circulargauge id='gauge'>
  <e-axes>
    <!-- Outer axis -->
    <e-axis [minimum]='0' [maximum]='100' radius='100%'>
      <e-pointers>
        <e-pointer [value]='65' type='Needle'></e-pointer>
      </e-pointers>
    </e-axis>

    <!-- Inner axis -->
    <e-axis [minimum]='0' [maximum]='200' radius='60%'>
      <e-pointers>
        <e-pointer [value]='120' type='RangeBar'></e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-circulargauge>

Use cases:

• Dual metrics: Humidity (outer) + Temperature (inner)
• Layered information: Current value (outer) + Average (inner)
• Multi-scale displays: Different units or ranges

Each axis:

• Has independent pointers
• Has independent ranges
• Can be independently styled
• Uses independent radius/angle settings

---

Getting Started with Angular Circular Gauge

Table of Contents

• Installation
• Prerequisites
• Install Circular Gauge Package
• Module Setup
• Import CircularGaugeModule
• Add Required Services
• Update index.html
• Basic Implementation
• Minimal Gauge
• Gauge with Axes and Pointers
• Setting Pointer Values
• Static Values (Template)
• Dynamic Values (Component)
• Programmatic Update (ViewChild)
• Multiple Pointer Values
• Import Styles
• Syncfusion Styles
• Tailwind Configuration (if using Tailwind)
• Common Setup Issues
• Issue: "CircularGaugeModule not found"
• Issue: Gauge not rendering (blank container)
• Issue: "Cannot read property 'setPointerValue' of undefined"
• Issue: Styles not applying

When to Use This Skill

Use this skill when you need to:

• Set up Angular CircularGauge — Install and configure Syncfusion circulargauge in Angular projects
• Install packages — Add required npm packages
• Configure modules — Import CircularGaugeModule in Angular modules
• Initialize circulargauge — Create first working circulargauge component
• Basic column setup — Define and configure columns

Installation

Install Syncfusion Angular Grid component via npm:

npm install @syncfusion/ej2-angular-circulargauge

Module Setup

Import CircularGaugeModule

Register the module in your Angular component:

import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  imports: [CircularGaugeModule],
  standalone: true,
  selector: 'app-gauge',
  template: `<ejs-circulargauge id='circular-container'></ejs-circulargauge>`,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent { }

Key points:

• Use imports array for standalone components
• ViewEncapsulation.None allows CSS to apply to nested elements

Add Required Services

If using advanced features (tooltips, annotations), inject the corresponding service:

import { GaugeTooltipService } from '@syncfusion/ej2-angular-circulargauge';

@Component({
  imports: [CircularGaugeModule],
  providers: [GaugeTooltipService],  // ← Add service provider
  standalone: true,
  selector: 'app-gauge',
  template: `<ejs-circulargauge id='circular-container'></ejs-circulargauge>`,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent { }

Common services:

• GaugeTooltipService - For tooltip functionality
• AnnotationsService - For custom annotations

Update index.html

Ensure the app root element exists:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Circular Gauge App</title>
</head>
<body>
  <app-gauge></app-gauge>
</body>
</html>

Basic Implementation

Minimal Gauge

import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  imports: [CircularGaugeModule],
  standalone: true,
  selector: 'app-gauge',
  template: `<ejs-circulargauge id='gauge-container'></ejs-circulargauge>`,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent { }

Output: Default gauge with:

• Single axis (0-100 range)
• Default pointer at center
• Tick marks and labels
• Full circular layout (200° to 160°)

Gauge with Axes and Pointers

@Component({
  imports: [CircularGaugeModule],
  standalone: true,
  selector: 'app-gauge',
  template: `
    <ejs-circulargauge id="circular-container" [title]='title'>
        <e-axes>
            <e-axis>
                <e-pointers>
                    <e-pointer value=35></e-pointer>
                </e-pointers>
            </e-axis>
        </e-axes>
    </ejs-circulargauge>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  title = 'Gauge Title';
}

Breakdown:

• <ejs-circulargauge> - Main container
• <e-axes> - Axis collection
• <e-axis> - Single axis configuration
• [startAngle] / [endAngle] - Arc range (200° to 160° = 320° arc)
• <e-pointers> - Pointer collection
• <e-pointer> - Individual pointer
• [value] - Pointer position (0-100)
• type='Needle' - Pointer style (Needle, RangeBar, Marker)

Setting Pointer Values

Static Values (Template)

Set pointer value in template:

<e-pointer [value]='50' type='Needle'></e-pointer>

Dynamic Values (Component)

Update pointer from component property:

export class AppComponent {
  pointerValue: number = 50;

  updatePointer() {
    this.pointerValue = 75; // Updates displayed pointer
  }
}

Template:

<e-pointer [value]='pointerValue' type='Needle'></e-pointer>

Programmatic Update (ViewChild)

Access gauge via ViewChild to update values dynamically:

import { CircularGaugeComponent } from '@syncfusion/ej2-angular-circulargauge';
import { ViewChild, Component, AfterViewInit } from '@angular/core';

@Component({
  // ...
})
export class AppComponent implements AfterViewInit {
  @ViewChild('gauge') gaugeObj: CircularGaugeComponent;

  ngAfterViewInit() {
    // Update pointer value after component initializes
    this.gauge.setPointerValue(0, 0, 85); // axis, pointer index, value
  }

  updateValue() {
    this.gaugeObj.setPointerValue(0, 0, 90);
  }
}

Template:

<ejs-circulargauge #gauge>
  <e-axes>
    <e-axis>
      <e-pointers>
        <e-pointer [value]='50' type='Needle'></e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-circulargauge>
<button (click)='updateValue()'>Update to 90</button>

Multiple Pointer Values

<e-axis>
  <e-pointers>
    <e-pointer [value]='50' type='Needle'></e-pointer>
    <e-pointer [value]='75' type='RangeBar'></e-pointer>
    <e-pointer [value]='60' type='Marker'></e-pointer>
  </e-pointers>
</e-axis>

Each pointer shows independently on the same axis.

Common Setup Issues

Issue: "CircularGaugeModule not found"

Cause: Package not installed or wrong import path

Solution:

npm install @syncfusion/ej2-angular-circulargauge --save

Then verify import:

import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';

Issue: Gauge not rendering (blank container)

Cause: Missing styles or ViewEncapsulation issue

Solution: 1. Set ViewEncapsulation:

@Component({
  encapsulation: ViewEncapsulation.None
})

Issue: "Cannot read property 'setPointerValue' of undefined"

Cause: ViewChild accessed before component initializes

Solution: Use AfterViewInit:

import { AfterViewInit, ViewChild } from '@angular/core';

export class AppComponent implements AfterViewInit {
  @ViewChild('gauge') gaugeObj: CircularGaugeComponent;

  ngAfterViewInit() {
    // Safe to access gauge here
    this.gaugeObj.setPointerValue(0, 0, 75);
  }
}

Issue: Styles not applying

Cause: Incorrect theme import or missing CSS

Solution: 1. Verify theme import in global styles.css 2. Check ViewEncapsulation setting 3. Ensure @syncfusion/ej2-base is installed (peer dependency)

---

Pointers and Types

Table of Contents

• Pointer Types Overview
• Needle Pointers
• Basic Needle Pointer
• Customizing Needle Length
• Customizing Needle Width
• Needle Color and Style
• Cap Customization
• Tail Customization
• Complete Needle Example
• RangeBar Pointers
• Basic RangeBar
• Customizing RangeBar Appearance
• Rounded Corners
• Multiple RangeBars
• Marker Pointers
• Built-in Marker Shapes
• Specific Shape Selection
• Marker Customization
• Custom Marker Image
• Multiple Markers
• Pointer Dragging
• Enable Dragging Globally
• Enable Dragging Per Pointer
• Disable Dragging on Specific Pointers
• Multiple Pointers
• Animation
• Enable Pointer Animation
• Global Gauge Animation
• Animation Sequence
• Gradient Colors
• Linear Gradient
• Radial Gradient
• Gradient Use Cases

Pointer Types Overview

Circular Gauge supports three pointer types to display values:

Needle Pointers

The needle pointer is the classic speedometer-style indicator with three components: needle, cap, and tail.

Basic Needle Pointer

<e-pointer [value]='65' type='Needle'>
</e-pointer>

Customizing Needle Length

Control needle extent using radius property:

<e-pointer [value]='65' type='Needle' radius='80%'>
  <!-- Needle extends 80% of axis radius -->
</e-pointer>

Options:

• 80% - Percentage of axis radius (responsive)
• 250 - Fixed pixels
• Default: ~95% of axis radius

Customizing Needle Width

Set needle thickness:

<e-pointer [value]='65' 
           type='Needle' 
           [pointerWidth]='15'
           [needleStartWidth]='15'
           [needleEndWidth]='5'>
  <!-- Tapered needle: wide at base, pointed at end -->
</e-pointer>

Properties:

• pointerWidth - Standard needle width
• needleStartWidth - Width at base (center)
• needleEndWidth - Width at tip

Needle Color and Style

<e-pointer [value]='65' 
           type='Needle' 
           color='#0074E3'>
  <!-- Blue needle -->
</e-pointer>

Cap Customization

The cap (knob) at the needle center:

<e-pointer [value]='65' type='Needle' [cap]="cap">
</e-pointer>

Component:

export class AppComponent {
  cap= {
        radius: 15,
        color: 'white',
        border: {
            color: '#007DD1',
            width: 5
        }
    };
}

Cap properties:

• radius - Cap size in pixels
• color - Cap fill color
• border - Border styling

Tail Customization

The tail extends behind the needle center:

<e-pointer value=90 radius="50%" pointerWidth=25 type="Needle" color='#007DD1' [cap]="cap" [needleTail]="needleTail"></e-pointer>

Tail properties:

• length - Tail length (pixels or percentage)
• color - Tail color
• border - Border styling
• linearGradient - Linear Gradient Tail color
• radialGradient - Radial Gradient Tail color

Complete Needle Example

export class AppComponent {
  needleConfig = {
    value: 75,
    type: 'Needle',
    radius: '90%',
    pointerWidth: 12,
    needleStartWidth: 12,
    needleEndWidth: 3,
    color: '#0074E3'
  };

  capConfig = {
    radius: 10,
    color: '#0074E3',
    border: { color: '#333333', width: 2 }
  };

  tailConfig = {
    length: '30%',
    color: '#999999'
  };
}

<e-pointer 
    [value]="needleConfig.value"
    [type]="needleConfig.type"
    [radius]="needleConfig.radius"
    [pointerWidth]="needleConfig.pointerWidth"
    [needleStartWidth]="needleConfig.needleStartWidth"
    [needleEndWidth]="needleConfig.needleEndWidth"
    [color]="needleConfig.color"
    [cap]="capConfig"
    [needleTail]="tailConfig">
</e-pointer>

RangeBar Pointers

RangeBar pointers fill from the center outward, similar to a progress bar.

Basic RangeBar

<e-pointer [value]='65' type='RangeBar'>
</e-pointer>

Behavior:

• Fills from center to pointer value
• Creates a visual "progress" effect
• Useful for completion percentages

Customizing RangeBar Appearance

<e-pointer [value]='65' 
           type='RangeBar'
           color='#4CAF50'
           [pointerWidth]='20'>
  <!-- Green bar, 20px thick -->
</e-pointer>

Properties:

• color - Bar fill color
• pointerWidth - Bar thickness
• border - Border styling

Rounded Corners

Add rounded caps to RangeBar for modern appearance:

<e-range start=40 end=80 radius='50%' roundedCornerRadius=6></e-range>

Effect: Creates arc gauge appearance with smooth ends.

Multiple RangeBars

Layer multiple RangeBars for comparison:

<e-axis>
  <e-pointers>
    <!-- Target: 80 -->
    <e-pointer [value]='80' 
               type='RangeBar' 
               color='#CCCCCC'
               [pointerWidth]='8'></e-pointer>
    
    <!-- Actual: 65 -->
    <e-pointer [value]='65' 
               type='RangeBar' 
               color='#4CAF50'
               [pointerWidth]='12'></e-pointer>
  </e-pointers>
</e-axis>

Marker Pointers

Marker pointers use shapes or images to indicate values.

Built-in Marker Shapes

<e-pointer [value]='65' type='Marker'>
</e-pointer>

Available shapes:

• Circle (default)
• Rectangle
• Triangle
• InvertedTriangle
• Diamond

Specific Shape Selection

<e-pointer [value]='65' 
           type='Marker' 
           [markerShape]="'Triangle'">
</e-pointer>

Marker Customization

<e-pointer [value]='65' 
           type='Marker' 
           [markerShape]="'Circle'"
           [markerWidth]='16'
           [markerHeight]='16'
           color='#0074E3'
           [border]="{ color: '#000', width: 2 }">
</e-pointer>

Marker properties:

• markerShape - Shape type
• markerWidth - Width in pixels
• markerHeight - Height in pixels
• color - Fill color
• border - Border styling

Custom Marker Image

Replace shapes with custom image:

<e-pointer [value]='65' 
           type='Marker' 
           [markerShape]="'Image'"
           [imageUrl]="'/assets/marker.png'">
</e-pointer>

Tips:

• Use small images (16x16px - 32x32px)
• Support PNG, SVG, JPG formats
• Ensure image loads correctly

Multiple Markers

Show different metrics as different marker shapes:

<e-axis>
  <e-pointers>
    <!-- Current value: circle -->
    <e-pointer [value]='65' 
               type='Marker'
               [markerShape]="'Circle'"
               color='#0074E3'></e-pointer>
    
    <!-- Average value: diamond -->
    <e-pointer [value]='55'
               type='Marker'
               [markerShape]="'Diamond'"
               color='#FF9800'></e-pointer>
  </e-pointers>
</e-axis>

Pointer Dragging

Allow users to adjust values by dragging pointers.

Enable Dragging Globally

Enable drag for all pointers across all axes:

<ejs-circulargauge [enablePointerDrag]='true'>
  <!-- All pointers now draggable -->
</ejs-circulargauge>

Enable Dragging Per Pointer

Enable drag for specific pointers only:

<e-pointer [value]='65' [enableDrag]='true'>
  <!-- Only this pointer is draggable -->
</e-pointer>

When enableDrag is set on individual pointers, it overrides the global enablePointerDrag setting.

Disable Dragging on Specific Pointers

Disable drag even when global setting is enabled:

<ejs-circulargauge [enablePointerDrag]='true'>
  <e-axes>
    <e-axis>
      <e-pointers>
        <!-- Draggable (inherits global setting) -->
        <e-pointer [value]='65' type='Needle'></e-pointer>
        
        <!-- Not draggable (explicitly disabled) -->
        <e-pointer [value]='85' type='RangeBar' [enableDrag]='false'></e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-circulargauge>

Multiple Pointers

Display multiple pointers on a single axis:

<e-axis>
  <e-pointers>
    <!-- Primary value: Needle -->
    <e-pointer [value]='65' type='Needle'></e-pointer>
    
    <!-- Target value: RangeBar -->
    <e-pointer [value]='80' type='RangeBar' color='#CCCCCC'></e-pointer>
    
    <!-- Average value: Marker -->
    <e-pointer [value]='55' type='Marker' [markerShape]="'Diamond'"></e-pointer>
  </e-pointers>
</e-axis>

Use cases:

• Show current + target + average simultaneously
• Compare multiple metrics on same scale
• Visualize range (min/max with current)

Animation

Animate pointers when they load or when values change.

Enable Pointer Animation

<e-pointer [value]='65' type='Needle' [animation]="animation">

Properties:

• enable - true/false to enable animation
• duration - Animation duration in milliseconds

Global Gauge Animation

Animate entire gauge including all elements:

<ejs-circulargauge [animationDuration]='2000'>
  <!-- Axis, ticks, labels, ranges, pointers, annotations all animate -->
</ejs-circulargauge>

Animation Sequence

Global animationDuration animates in order: 1. Axis line 2. Ticks and labels 3. Ranges 4. Pointers (with individual animation if set) 5. Annotations

Gradient Colors

Apply gradient fills to pointers for sophisticated visual effects.

Linear Gradient

Colors transition linearly:

<e-pointer [value]='65' type='Needle'>
  <e-linearGradient [startValue]='0' [endValue]='100'>
    <e-colorStops>
      <e-colorStop [color]='#FF0000' [offset]='0%'></e-colorStop>
      <e-colorStop [color]='#FFFF00' [offset]='50%'></e-colorStop>
      <e-colorStop [color]='#00FF00' [offset]='100%'></e-colorStop>
    </e-colorStops>
  </e-linearGradient>
</e-pointer>

Radial Gradient

Colors transition in circular progression:

<e-pointer [value]='65' type='RangeBar'>
  <e-radialGradient [innerPosition]="{ x: '30%', y: '30%' }" 
                    [outerPosition]="{ x: '70%', y: '70%' }">
    <e-colorStops>
      <e-colorStop [color]='#FF0000' [offset]='0%'></e-colorStop>
      <e-colorStop [color]='#00FF00' [offset]='100%'></e-colorStop>
    </e-colorStops>
  </e-radialGradient>
</e-pointer>

Gradient Use Cases

• Temperature gradient: Blue (cold) → Red (hot)
• Performance gradient: Green (good) → Red (poor)
• Risk gradient: Green (safe) → Red (danger)

---

Ranges and Styling

Table of Contents

• Range Basics
• Creating a Range
• Simple Range Example
• Range Customization
• Color
• Thickness (Width)
• Border
• Range Positioning
• Radius Control
• Pixel-Based Positioning
• Percentage-Based Positioning
• Offset from Axis
• Inside vs Outside
• Multiple Ranges
• Rounded Corner Radius
• Arc Gauge Effect
• Range Dragging
• Gradient Colors
• Linear Gradient
• Radial Gradient
• Using Range Colors for Ticks
• Complete Range Example

Range Basics

Ranges are colored zones that categorize intervals on a gauge axis. They highlight value regions (e.g., safe/warning/danger zones).

Creating a Range

<e-axis>
  <e-ranges>
    <e-range [start]='0' [end]='50' color='#4CAF50'></e-range>
  </e-ranges>
</e-axis>

Properties:

• start - Range start value (e.g., 0)
• end - Range end value (e.g., 50)
• color - Range fill color

Simple Range Example

Create a temperature gauge with a comfort zone:

<e-axis [minimum]='0' [maximum]='50'>
  <e-ranges>
    <!-- Comfort zone: 18-24°C -->
    <e-range [start]='18' [end]='24' color='#4CAF50'></e-range>
  </e-ranges>
  <e-pointers>
    <e-pointer [value]='22' type='Needle'></e-pointer>
  </e-pointers>
</e-axis>

Range Customization

Color

Set range fill color:

<e-range [start]='0' [end]='50' color='#0074E3'></e-range>

Thickness (Width)

Control range thickness using startWidth and endWidth:

<e-range [start]='0' 
         [end]='50' 
         color='#4CAF50'
         [startWidth]='20'
         [endWidth]='10'>
  <!-- Tapered: 20px at start, 10px at end -->
</e-range>

Use cases:

• Uniform thickness: Set both to same value
• Tapered effect: Decrease end width
• Variable emphasis: Thicker at higher values

Border

Add border styling:

<e-range [start]='0' [end]='50'
         color='#4CAF50'
         [border]="{ color: '#333333', width: 2 }">
</e-range>

Range Positioning

Radius Control

Position range inside or outside axis using radius:

<e-range [start]='0' [end]='50' radius='100%'></e-range>
<!-- 100% = axis radius (default) -->

Pixel-Based Positioning

Fixed distance from center:

<e-range [start]='0' [end]='50' radius='200px'></e-range>

Percentage-Based Positioning

Responsive positioning:

<e-range [start]='0' [end]='50' radius='80%'></e-range>

Offset from Axis

Move range relative to its radius:

<e-range [start]='0' [end]='50' radius='90%' [offset]='10'></e-range>

Inside vs Outside

<!-- Inside axis: smaller radius -->
<e-range [start]='0' [end]='50' radius='50%'></e-range>

<!-- Outside axis: larger radius -->
<e-range [start]='0' [end]='50' radius='120%'></e-range>

Multiple Ranges

Create zones for different states:

<e-axis [minimum]='0' [maximum]='200'>
  <e-ranges>
    <!-- Safe: 0-60 -->
    <e-range [start]='0' [end]='60' color='#4CAF50'></e-range>
    
    <!-- Caution: 60-140 -->
    <e-range [start]='60' [end]='140' color='#FF9800'></e-range>
    
    <!-- Danger: 140-200 -->
    <e-range [start]='140' [end]='200' color='#F44336'></e-range>
  </e-ranges>
</e-axis>

Rounded Corner Radius

Smooth range edges for modern appearance:

<e-range [start]='0' [end]='50' [color]='#4CAF50'>
  <e-roundedCornerRadius [radius]='8'></e-roundedCornerRadius>
</e-range>

Arc Gauge Effect

Use rounded corners for arc gauge styling:

<e-axis [startAngle]='200' [endAngle]='160'>
  <e-ranges>
    <e-range [start]='0' [end]='50' color='#4CAF50' roundedCornerRadius=6>
    </e-range>
  </e-ranges>
</e-axis>

Range Dragging

Allow users to adjust range positions dynamically:

<ejs-circulargauge [enableRangeDrag]='true'>
  <e-axes>
    <e-axis>
      <e-ranges>
        <e-range [start]='30' [end]='70'></e-range>
      </e-ranges>
    </e-axis>
  </e-axes>
</ejs-circulargauge>

Behavior:

• Click and drag range start/end points
• Updates range values dynamically
• Useful for interactive calibration

Gradient Colors

Apply sophisticated color transitions to ranges.

Linear Gradient

Color transitions in linear progression:

<e-axis [lineStyle]='lineStyle' radius='90%' startAngle=200 endAngle=130 minimum=0 maximum=14 [labelStyle]='labelStyle' [majorTicks]='majorTicks' [minorTicks]='minorTicks' [ranges]='ranges'>
</e-axis>

Component:

rangeLinearGradient: Object = {
    startValue: '0%', endValue: '100%',
    colorStop: [
        { color: '#9E40DC', offset: '0%', opacity: 0.9 },
        { color: '#E63B86', offset: '70%', opacity: 0.9 }]
};
ranges = [{
    start: 0, end: 12, radius: '115%',
    startWidth: 25, endWidth: 25,
    linearGradient : this.rangeLinearGradient
}, {
    start: 0, end: 11, radius: '85%',
    startWidth: 25, endWidth: 25,
    linearGradient : this.rangeLinearGradient
}, {
    start: 0, end: 10, radius: '55%',
    startWidth: 25, endWidth: 25,
    linearGradient : this.rangeLinearGradient
}];

Effect: Red → Yellow → Green gradient across range

Radial Gradient

Color transitions in circular progression:

<e-axis [lineStyle]='lineStyle' radius='90%' startAngle=200 endAngle=130 minimum=0 maximum=14 [labelStyle]='labelStyle' [majorTicks]='majorTicks' [minorTicks]='minorTicks' [ranges]='ranges'>

Component:

rangeRadialGradient: Object = {
    radius: '50%', innerPosition: { x: '50%', y: '50%' },
    outerPosition: { x: '50%', y: '50%' },
    colorStop: [
        { color: '#9E40DC', offset: '90%', opacity: 0.9 },
        { color: '#E63B86', offset: '160%', opacity: 0.9 }]
};
ranges = [{
      start: 0, end: 12, radius: '115%',
      startWidth: 25, endWidth: 25,
      radialGradient: rangeRadialGradient
  }, {
      start: 0, end: 11, radius: '85%',
      startWidth: 25, endWidth: 25,
      radialGradient: rangeRadialGradient
  }, {
      start: 0, end: 10, radius: '55%',
      startWidth: 25, endWidth: 25,
      radialGradient: rangeRadialGradient
}];

Using Range Colors for Ticks

Apply range colors to tick marks for visual consistency:

<ejs-circulargauge id="circular-container">
    <e-axes>
        <e-axis [majorTicks]="majorTicks" [minorTicks]="minorTicks">
        <e-ranges>
            <e-range [start]='0' [end]='50' color='#4CAF50'></e-range>
            <e-range [start]='50' [end]='100' color='#FF9800'></e-range>
        </e-ranges>
    </e-axis>
    </e-axes>
</ejs-circulargauge>

Component:

majorTicks= {
    interval: 10,
    color:'red',
    height: 10,
    width: 3,
    useRangeColor: false
};
minorTicks= {
    interval: 5,
    color:'green',
    height: 5,
    width: 2,
    useRangeColor: true
};

Complete Range Example

Multi-range gauge with customization:

export class AppComponent {
  gaugeConfig = {
    title: 'Performance Gauge',
    minimum: 0,
    maximum: 100
  };

  ranges = [
    {
      start: 0,
      end: 33,
      color: '#F44336',
      startWidth: 20,
      endWidth: 20,
      roundedCornerRadius: 8
    },
    {
      start: 33,
      end: 67,
      color: '#FFC107',
      startWidth: 20,
      endWidth: 20,
      roundedCornerRadius: 8
    },
    {
      start: 67,
      end: 100,
      color: '#4CAF50',
      startWidth: 20,
      endWidth: 20,
      roundedCornerRadius: 8
    }
  ];
}

Template:

<ejs-circulargauge [title]="gaugeConfig.title">
  <e-axes>
    <e-axis
      [minimum]="gaugeConfig.minimum"
      [maximum]="gaugeConfig.maximum"
      [ranges]="ranges">

      <e-pointers>
        <e-pointer
          [value]="60"
          type="Needle">
        </e-pointer>
      </e-pointers>

    </e-axis>
  </e-axes>
</ejs-circulargauge>

---