Gauge pointers in Angular Circular Gauge Component
27 Apr 202424 minutes to read
Pointers are used to indicate values on the axis. Value of the pointer can be modified using the value
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=90></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {
// Initialize objects
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Gauge supports 3 types of pointers such as Needle
, RangeBar
and Marker
.
You can choose any one of the pointer by using type
property.
Needle Pointers
A needle pointer contains three parts, a needle, a cap / knob and a tail.
The length of the needle can be customized by using radius
property.
The length of the tail can be customized by using length
property.
The radius of the cap can be customized by using radius
in cap object.
The needle and tail length takes value either in percentage
or pixel
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=90 radius="50%" [cap]="cap" [needleTail]="needleTail"></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public cap?: Object;
public needleTail?: Object;
ngOnInit(): void {
// Initialize objects
this.cap= {
radius: 10
};
this.needleTail= {
length: '25%'
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Customization
Needle color and width can be customized by using color
and pointerWidth
property.
Cap and tails can be customized by using cap
and needleTail
object.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=90 radius="50%" pointerWidth=25 color='#007DD1' [cap]="cap" [needleTail]="needleTail"></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public cap?: Object;
public needleTail?: Object;
ngOnInit(): void {
// Initialize objects
this.cap= {
radius: 15,
color: 'white',
border: {
color: '#007DD1',
width: 5
}
};
this.needleTail= {
length: '22%',
color: '#007DD1'
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
The appearance of the needle pointer can be customized by using needleStartWidth
and needleEndWidth
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis startAngle=270 endAngle=90 [lineStyle]="lineStyle" [labelStyle]="labelStyle" [majorTicks]="majorTicks" [minorTicks]="minorTicks"
radius='90%' minimum=0 maximum=100>
<e-pointers>
<e-pointer value=70 radius="80%" pointerWidth=2 color='green' [needleStartWidth]="needleStartWidth" [needleEndWidth]="needleEndWidth" [cap]="cap" [needleTail]="needleTail" [animation]="animation"></e-pointer>
</e-pointers>
<e-annotations>
<e-annotation angle=180 radius="20%" zIndex=1>
<ng-template #content>
<div>
<div style="color:#757575; font-family:Roboto; font-size:14px;padding-top: 26px">Customized Needle</div>
</div>
</ng-template>
</e-annotation>
</e-annotations>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public cap?: Object;
public needleTail?: Object;
public animation?: Object;
public labelStyle?: Object;
public lineStyle?: Object;
public majorTicks?: Object;
public minorTicks?: Object;
public needleStartWidth?: Number;
public needleEndWidth?: Number;
ngOnInit(): void {
// Initialize objects
this.needleStartWidth = 4;
this.needleEndWidth = 4;
this.animation = {
enable: true , duration: 1000
};
this.cap= {
radius: 8,
color: 'green'
};
this.needleTail= {
length: '0%'
};
this.labelStyle= {
position: 'Outside',
font:{
size: '0px', color: '#1E7145'
}
};
this.lineStyle= {
width: 3, color: '#1E7145'
};
this.majorTicks = {
width: 1,
height: 0,
interval: 100
};
this.minorTicks = {
height: 0,
width: 0
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
RangeBar Pointer
RangeBar pointer is like ranges in an axis, that can be placed on gauge to mark the pointer value.
RangeBar starts from the beginning of the gauge and ends at the pointer value.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=50 type="RangeBar" radius="60%"></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {
// Initialize objects
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Customization
RangeBar can be customized in terms of color, border and thickness by using color
, border
and pointerWidth
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=50 type="RangeBar" radius="60%" pointerWidth=15 color='#007DD1'[border]="pointerBorder"></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public pointerBorder?: Object;
ngOnInit(): void {
// Initialize objects
this.pointerBorder = {
color: 'grey',
width: 2
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Rounded corner for range bar pointer
The start and end pointers of range bar in the circular gauge are rounded to form arc gauges.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis [lineStyle]="lineStyle">
<e-ranges>
<e-range start=0 end=50 radius="108%"></e-range>
<e-range start=50 end=100 radius="108%"></e-range>
</e-ranges>
<e-pointers>
<e-pointer value=50 type="RangeBar" roundedCornerRadius=6></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public lineStyle?: Object;
ngOnInit(): void {
// Initialize objects
this.lineStyle = {
color: 'transparent'
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Marker Pointer
Different type of marker shape can be used to mark the pointer value in axis. You can change the marker shape using markerShape
property in pointer.
Gauge supports the below marker shape.
- Circle
- Rectangle
- Triangle
- InvertedTriangle
- Diamond
We can use image instead of rendering marker shape to denote the pointer value. It can be achieved by setting markerShape
to Image and assigning image path to imageUrl
in pointer.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=90 type="Marker" markerShape="InvertedTriangle" radius="100%" [markerHeight]="markerSize" [markerWidth]="markerSize"></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public markerSize?: number;
ngOnInit(): void {
// Initialize objects
this.markerSize = 15;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Customization
The marker can be customized in terms of color, border, width and height by using color
, border
, markerWidth
and markerHeight
property in pointer
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=90 type="Marker" markerShape="Triangle" radius="100%" color="white" [markerHeight]="markerSize" [markerWidth]="markerSize" [border]="pointerBorder"></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public pointerBorder?: Object;
public markerSize?: number;
ngOnInit(): void {
// Initialize objects
this.markerSize = 15;
this.pointerBorder= {
color: '#007DD1',
width: 2
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Dragging Pointer
The pointers can be dragged over the axis line by clicking and dragging the same. To enable or disable the pointer drag, use the enablePointerDrag
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container" enablePointerDrag='true' height='250px' width='250px'>
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=50></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public animation?: Object;
ngOnInit(): void {
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Multiple Pointers
In addition to the default pointer, you can add n number of pointer to an axis by using pointers
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=90 type="Marker" markerShape="InvertedTriangle" radius="100%" [markerHeight]="markerSize" [markerWidth]="markerSize"></e-pointer>
<e-pointer value=90 type="RangeBar" radius="60%" pointerWidth=10></e-pointer>
<e-pointer value=90 radius="60%" pointerWidth=25 [cap]="pointerCap" [needleTail]= "pointerTail"></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public markerSize?: number;
public pointerCap?: Object;
public pointerTail?: Object;
ngOnInit(): void {
// Initialize objects
this.markerSize = 15;
this.pointerCap = {
radius: 15,
border: {
width: 5
}
};
this.pointerTail = {
length: '22%'
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Animation
Pointer will get animate on loading the gauge, this can be handled by using animation
property in pointer.
The enable
property in animation allows you to enable or disable the animation.
The duration
property specify the duration of the animation in milliseconds.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=90 [animation]="animation"></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public animation?: Object;
ngOnInit(): void {
// Initialize objects
this.animation= {
enable: true,
duration: 1500
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Gradient Color
Gradient support allows to add multiple colors in the ranges and pointers of the circular gauge. The following gradient types are supported in the circular gauge.
- Linear Gradient
- Radial Gradient
Linear Gradient
Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient will be set using the startValue
property. The end value of the linear gradient will be set using the endValue
property. The color stop values such as color, opacity and offset are set using colorStop
property.
The linear gradient can be applied to all pointer types like marker, range bar and needle. To do so, follow the below code sample.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis startAngle=270 endAngle=90 radius='90%' minimum=0 maximum=100 [lineStyle]='lineStyle' [labelStyle]='labelStyle' [majorTicks]='majorTicks' [minorTicks]='minorTicks' [pointers]='pointers'>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public lineStyle?: Object;
public labelStyle?: Object;
public majorTicks?: Object;
public minorTicks?: Object;
public pointers?: Object[];
public pointerLinearGradient: Object = {
startValue: '0%',
endValue: '100%',
colorStop: [
{ color: '#FEF3F9', offset: '0%', opacity: 0.9 },
{ color: '#E63B86', offset: '70%', opacity: 0.9 }]
};
ngOnInit(): void {
// Initialize objects
this.lineStyle= {
width: 3, color: '#E63B86'
};
this.labelStyle = {
font: { size: '0px'}
};
this.majorTicks = {
height: 0
};
this.minorTicks = {
height: 0
};
this.pointers = [{
radius: '80%',
value: 80,
animation: { enable: true, duration: 1000 },
pointerWidth: 10,
linearGradient: this.pointerLinearGradient,
cap: {
radius: 8,
color: 'white',
border: {
color: '#E63B86',
width: 1
}
},
needleTail: {
length: '20%',
linearGradient: this.pointerLinearGradient
}
}, {
radius: '60%', value: 40,
animation: { duration: 1000 },
pointerWidth: 10,
linearGradient: this.pointerLinearGradient,
cap: {
radius: 8, color: 'white',
border: { color: '#E63B86', width: 1 }
},
needleTail: {
length: '20%',
linearGradient: this.pointerLinearGradient
}
}];
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Radial Gradient
Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the innerPosition
property. The outer circle position of the radial gradient can be set using the outerPosition
property. The color stop values such as color, opacity and offset are set using colorStop
property.
The radial gradient can be applied to all pointer types like marker, range bar and needle. To do so, follow the below code sample.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis startAngle=270 endAngle=90 radius='90%' minimum=0 maximum=100 [lineStyle]='lineStyle' [labelStyle]='labelStyle' [majorTicks]='majorTicks' [minorTicks]='minorTicks' [pointers]='pointers'>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public lineStyle?: Object;
public labelStyle?: Object;
public majorTicks?: Object;
public minorTicks?: Object;
public pointers?: Object[];
public pointerRadialGradient : Object = {
radius: '50%',
innerPosition: { x: '50%', y: '50%' },
outerPosition: { x: '50%', y: '50%' },
colorStop: [
{ color: '#FEF3F9', offset: '0%', opacity: 0.9 },
{ color: '#E63B86', offset: '60%', opacity: 0.9 }]
};
ngOnInit(): void {
// Initialize objects
this.lineStyle= {
width: 3, color: '#E63B86'
};
this.labelStyle = {
font: { size: '0px'}
};
this.majorTicks = {
height: 0
};
this.minorTicks = {
height: 0
};
this.pointers = [{
radius: '80%',
value: 80,
animation: { enable: true, duration: 1000 },
pointerWidth: 10,
radialGradient: this.pointerRadialGradient,
cap: {
radius: 8,
color: 'white',
border: {
color: '#E63B86',
width: 1
}
},
needleTail: {
length: '20%',
radialGradient: this.pointerRadialGradient
}
}, {
radius: '60%', value: 40,
animation: { duration: 1000 },
pointerWidth: 10,
radialGradient: this.pointerRadialGradient,
cap: {
radius: 8, color: 'white',
border: { color: '#E63B86', width: 1 }
},
needleTail: {
length: '20%',
radialGradient: this.pointerRadialGradient
}
}];
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));