Search results

Annotations in Angular Linear Gauge component

14 Apr 2021 / 3 minutes to read

Annotations are used to mark the specific area of interest in the gauge area with texts, shapes or images. You can add any number of annotations to the gauge.

Annotation

By using the content property of annotation object, you can either specify the id of the element or specify the code to create a new element, that needs to be displayed in the gauge area.

Copied to clipboard
<script id='fruits' type="text/x-template">
   <div id='apple'>
       <img src='src/lineargauge/images/apple.png'>
   </div>
</script>
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-container',
    template: `
    <ejs-lineargauge id="gauge-container">
    <e-annotations>
        <e-annotation content='fruits' x=100 y=100></e-annotation>
      </e-annotations>
    </ejs-lineargauge>`
})
export class AppComponent {
    ngOnInit(): void {
    }
}

Annotation Customization

You can customize the annotation using following properties.

  • zIndex - When annotation overlaps with another element, you can use this property to bring annotation to the front or back.
  • horizontalAlignment - To move annotation horizontally. Possible values are “Center”, “Far”, “Near”, “None”
  • verticalAlignment - To move annotation vertically. Possible values are “Center”, “Far”, “Near”, “None”
  • x and y - To move annotation to the specified location.

Changing the z-order

You can change the z-order of the annotation element by using the zIndex property.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container">
<e-annotations>
    <e-annotation content='<div id="first"><h1>Gauge</h1></div>' verticalAlignment="Center" horizontalAlignment='Center' zIndex='-1'></e-annotation>
  </e-annotations>
</ejs-lineargauge>`
})
export class AppComponent {
ngOnInit(): void {
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { AnnotationsService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AnnotationsService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Positioning of Annotation

You can place the annotation anywhere in gauge area by specifying pixel values to the x and y properties.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container">
<e-annotations>
    <e-annotation content='<div id="first"><h1>Gauge</h1></div>' x=100 y=100></e-annotation>
  </e-annotations>
</ejs-lineargauge>`
})
export class AppComponent {
ngOnInit(): void {
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { AnnotationsService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AnnotationsService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Alignment of Annotation

You can align the annotation using horizontalAlignment and verticalAlignment properties.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container">
<e-annotations>
    <e-annotation content='<div id="first"><h1>Gauge</h1></div>' verticalAlignment="Center" horizontalAlignment='Center'></e-annotation>
  </e-annotations>
</ejs-lineargauge>`
})
export class AppComponent {
ngOnInit(): void {
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { AnnotationsService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AnnotationsService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Multiple Annotations

You can add multiple annotation to the gauge as demonstrated below.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container">
<e-annotations>
    <e-annotation content='<div id="first"><h1 style="color:red;">Speed</h1></div>' verticalAlignment="Near" horizontalAlignment='Center' x=100 y=150>
    </e-annotation>
    <e-annotation content='<div id="first"><h1 style="color:blue;">Meter</h1></div>' verticalAlignment="Center" horizontalAlignment='Center' x=-100 y=-100>
    </e-annotation>
  </e-annotations>
</ejs-lineargauge>`
})
export class AppComponent {
ngOnInit(): void {
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { AnnotationsService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AnnotationsService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);