Gauge ranges in Angular Circular gauge component
27 Apr 202424 minutes to read
You can categories certain interval on gauge axis using ranges
property.
Start and End
Start and end value of a range in an axis can be customized by using start
and end
properties.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { AnnotationsService, GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [AnnotationsService, GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-ranges>
<e-range start=40 end=80></e-range>
</e-ranges>
</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
Color and thickness of the range can be customized by using color
, startWidth
and endWidth
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { AnnotationsService, GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [AnnotationsService, GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis minimum=0 maximum=100 [majorTicks]="majorTicks" [minorTicks]="minorTicks">
<e-ranges>
<e-range start=40 end=80 startWidth=15 endWidth=15 color="#ff5985"></e-range>
</e-ranges>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public majorTicks?: Object;
public minorTicks?: Object;
ngOnInit(): void {
// Initialize objects.
this.majorTicks = {
interval: 10
};
this.minorTicks = {
interval: 5
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Radius
You can place the range inside or outside of the axis by using radius
property.
The radius of the range can takes value either in percentage or in pixels.
By default, ranges take 100% of the axis radius.
In Pixel
You can set the radius of the range in pixel as demonstrated below,
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { AnnotationsService, GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [AnnotationsService, GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-ranges>
<e-range start=40 end=80 radius='100'></e-range>
</e-ranges>
</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));
In Percentage
By setting value in percentage, range gets its dimension with respect to its axis radius.
For example, when the radius is ‘50%’, range renders to half of the axis radius.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { AnnotationsService, GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [AnnotationsService, GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-ranges>
<e-range start=40 end=80 radius='50%'></e-range>
</e-ranges>
</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));
Dragging Range
The ranges can be dragged on the axis line by clicking and dragging the same. To enable or disable the range drag, use the enableRangeDrag
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" enableRangeDrag='true' height='250px' width='250px'>
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=50></e-pointer>
</e-pointers>
<e-ranges>
<e-range start=0 end=100 startWidth=8 endWidth=8 color="#30B32D" radius='108%'></e-range>
</e-ranges>
</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 Ranges
You can add multiple ranges to an axis with the above customization as demonstrated below.
Note: You can set the range color to axis ticks and labels by enabling
useRangeColor
property inmajorTicks
,minorTicks
andlabelStyle
object.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { AnnotationsService, GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [AnnotationsService, GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis [majorTicks]="majorTicks" [minorTicks]="minorTicks" [labelStyle]="labelStyle">
<e-ranges>
<e-range start=0 end=25 radius='108%'></e-range>
<e-range start=25 end=50 radius='70%'></e-range>
<e-range start=50 end=75 radius='70%'></e-range>
<e-range start=75 end=100 radius='108%'></e-range>
</e-ranges>
</e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public majorTicks?: Object;
public minorTicks?: Object;
public labelStyle?: Object;
ngOnInit(): void {
// Initialize objects.
this.majorTicks = {
useRangeColor: true
};
this.minorTicks = {
useRangeColor: true
};
this.labelStyle = {
useRangeColor: true
};
}
}
Rounded corner radius
You can customize the corner radius using the roundedCornerRadius
property in ranges
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { AnnotationsService, GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [AnnotationsService, GradientService],
standalone: true,
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis>
<e-ranges>
<e-range start=40 end=80 radius='50%' roundedCornerRadius=6></e-range>
</e-ranges>
</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));
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.
To apply linear gradient to the range, follow the below code sample.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { AnnotationsService, GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [AnnotationsService, GradientService],
standalone: true,
selector: 'app-container',
template:
` <ejs-circulargauge style='display:block;' [title]='title' centerY='57%' [titleStyle]='titleStyle'>
<e-axes>
<e-axis [lineStyle]='lineStyle' radius='90%' startAngle=200 endAngle=130 minimum=0 maximum=14 [labelStyle]='labelStyle' [majorTicks]='majorTicks'
[minorTicks]='minorTicks' [ranges]='ranges'>
<e-pointers>
<e-pointer type='Marker' [value]=12 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/foot-ball.png' radius='108%'
[markerWidth]=28 [markerHeight]=28 [animation]='animation1'>
</e-pointer>
<e-pointer type='Marker' [value]=11 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/basket-ball.png' radius='78%'
[markerWidth]=28 [markerHeight]=28 [animation]='animation2'>
</e-pointer>
<e-pointer type='Marker' [value]=10 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/golf-ball.png' radius='48%'
[markerWidth]=28 [markerHeight]=28 [animation]='animation3'>
</e-pointer>
<e-pointer type='Marker' [value]=12 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/athletics.png' radius='0%'
[markerWidth]=90 [markerHeight]=90 [animation]='animation4'>
</e-pointer>
<e-pointer type='Marker' [value]=0.1 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/girl.png' radius='108%'
[markerWidth]=28 [markerHeight]=28 [animation]='animation1'>
</e-pointer>
<e-pointer type='Marker' [value]=0.1 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/man-one.png' radius='78%' [markerWidth]=28
[markerHeight]=28 [animation]='animation1'>
</e-pointer>
<e-pointer type='Marker' [value]=0.1 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/man-two.png' radius='48%' [markerWidth]=28
[markerHeight]=28 [animation]='animation1'>
</e-pointer>
</e-pointers>
<e-annotations>
<e-annotation content='12 M' radius='108%' angle=98 zIndex='1'> </e-annotation>
<e-annotation content='11 M' radius='80%' angle=81 zIndex='1'> </e-annotation>
<e-annotation content='10 M' radius='50%' angle=69 zIndex='1'> </e-annotation>
<e-annotation content='Doe' radius='108%' angle=190 zIndex='1'> </e-annotation>
<e-annotation content='Almaida' radius='80%' angle=185 zIndex='1'> </e-annotation>
<e-annotation content='John' radius='50%' angle=180 zIndex='1'> </e-annotation>
</e-annotations>
</e-axis>
</e-axes>
</ejs-circulargauge>
`
})
export class AppComponent implements OnInit {
public ranges?: Object[];
public titleStyle?: Object;
public title?: string;
public animation1?: Object;
public animation2?: Object;
public animation3?: Object;
public animation4?: Object;
public lineStyle?: Object;
public labelStyle?: Object;
public majorTicks?: Object;
public minorTicks?: Object;
public rangeLinearGradient: Object = {
startValue: '0%', endValue: '100%',
colorStop: [
{ color: '#9E40DC', offset: '0%', opacity: 0.9 },
{ color: '#E63B86', offset: '70%', opacity: 0.9 }]
};
ngOnInit(): void {
// Initialize objects.
this.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
}];
this.titleStyle = { size: '18px' };
this.title = 'Short Put Distance';
this.animation1 = { duration: 1500 };
this.animation2 = { duration: 1200 };
this.animation3 = { duration: 900 };
this.animation4 = { duration: 0 };
this.lineStyle = { width: 0 };
this.labelStyle = { font: { size: '0px' } };
this.majorTicks = { width: 0 };
this.minorTicks = { width: 0 };
}
}
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.
To apply radial gradient to the range, follow the below code sample.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge'
import { AnnotationsService, GradientService } from '@syncfusion/ej2-angular-circulargauge'
import { Component, OnInit } from '@angular/core';
@Component({
imports: [
CircularGaugeModule
],
providers: [AnnotationsService, GradientService],
standalone: true,
selector: 'app-container',
template:
` <ejs-circulargauge style='display:block;' [title]='title' centerY='57%' [titleStyle]='titleStyle'>
<e-axes>
<e-axis [lineStyle]='lineStyle' radius='90%' startAngle=200 endAngle=130 minimum=0 maximum=14 [labelStyle]='labelStyle' [majorTicks]='majorTicks'
[minorTicks]='minorTicks' [ranges]='ranges'>
<e-pointers>
<e-pointer type='Marker' [value]=12 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/foot-ball.png' radius='108%'
[markerWidth]=28 [markerHeight]=28 [animation]='animation1'>
</e-pointer>
<e-pointer type='Marker' [value]=11 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/basket-ball.png' radius='78%'
[markerWidth]=28 [markerHeight]=28 [animation]='animation2'>
</e-pointer>
<e-pointer type='Marker' [value]=10 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/golf-ball.png' radius='48%'
[markerWidth]=28 [markerHeight]=28 [animation]='animation3'>
</e-pointer>
<e-pointer type='Marker' [value]=12 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/athletics.png' radius='0%'
[markerWidth]=90 [markerHeight]=90 [animation]='animation4'>
</e-pointer>
<e-pointer type='Marker' [value]=0.1 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/girl.png' radius='108%'
[markerWidth]=28 [markerHeight]=28 [animation]='animation1'>
</e-pointer>
<e-pointer type='Marker' [value]=0.1 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/man-one.png' radius='78%' [markerWidth]=28
[markerHeight]=28 [animation]='animation1'>
</e-pointer>
<e-pointer type='Marker' [value]=0.1 markerShape='Image' imageUrl='https://ej2.syncfusion.com/angular/demos/assets/circular-gauge/images/man-two.png' radius='48%' [markerWidth]=28
[markerHeight]=28 [animation]='animation1'>
</e-pointer>
</e-pointers>
<e-annotations>
<e-annotation content='12 M' radius='108%' angle=98 zIndex='1'> </e-annotation>
<e-annotation content='11 M' radius='80%' angle=81 zIndex='1'> </e-annotation>
<e-annotation content='10 M' radius='50%' angle=69 zIndex='1'> </e-annotation>
<e-annotation content='Doe' radius='108%' angle=190 zIndex='1'> </e-annotation>
<e-annotation content='Almaida' radius='80%' angle=185 zIndex='1'> </e-annotation>
<e-annotation content='John' radius='50%' angle=180 zIndex='1'> </e-annotation>
</e-annotations>
</e-axis>
</e-axes>
</ejs-circulargauge>
`
})
export class AppComponent implements OnInit {
public ranges?: Object[];
public titleStyle?: Object;
public title?: string;
public animation1?: Object;
public animation2?: Object;
public animation3?: Object;
public animation4?: Object;
public lineStyle?: Object;
public labelStyle?: Object;
public majorTicks?: Object;
public minorTicks?: Object;
public 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 }]
};
ngOnInit(): void {
// Initialize objects.
this.ranges = [{
start: 0, end: 12, radius: '115%',
startWidth: 25, endWidth: 25,
radialGradient: this.rangeRadialGradient
}, {
start: 0, end: 11, radius: '85%',
startWidth: 25, endWidth: 25,
radialGradient: this.rangeRadialGradient
}, {
start: 0, end: 10, radius: '55%',
startWidth: 25, endWidth: 25,
radialGradient: this.rangeRadialGradient
}];
this.titleStyle = { size: '18px' };
this.title = 'Short Put Distance';
this.animation1 = { duration: 1500 };
this.animation2 = { duration: 1200 };
this.animation3 = { duration: 900 };
this.animation4 = { duration: 0 };
this.lineStyle = { width: 0 };
this.labelStyle = { font: { size: '0px' } };
this.majorTicks = { width: 0 };
this.minorTicks = { width: 0 };
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));