Search results

Appearance in Angular Linear Gauge component

30 Jul 2021 / 4 minutes to read

Customizing the Linear Gauge area

The following properties are available in the ejs-lineargauge to customize the Linear Gauge area.

  • background - Applies the background color for the Linear gauge.
  • border - To customize the color and width of the border in Linear Gauge.
  • margin - To customize the margins of the Linear Gauge.
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" background='skyblue' [border]='border' [margin]='margin'>
</ejs-lineargauge>`
})
export class AppComponent {
public border: Object;
public margin: Object;
ngOnInit(): void {
  this.border = { color: "#FF0000", width: 2 };
  this.margin = { left: 20, top: 20, right: 20, bottom: 20}
}
}
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 { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ GaugeTooltipService ]
})
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);

Setting up the Linear Gauge title

The title for the Linear Gauge can be set using title property in ejs-lineargauge. Its appearance can be customized using the titleStyle with the below properties.

  • color - Specifies the text color of the title.
  • fontFamily - Specifies the font family of the title.
  • fontStyle - Specifies the font style of the title.
  • fontWeight - Specifies the font weight of the title.
  • opacity - Specifies the opacity of the title.
  • size - Specifies the font size of the title.
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" title='Speedometer' [titleStyle]='titleStyle'>
</ejs-lineargauge>`
})
export class AppComponent {
public titleStyle: Object;
ngOnInit(): void {
  this.titleStyle = {
    fontFamily: "Arial",
    fontStyle: 'italic',
    fontWeight: 'regular',
    color: "#E27F2D",
    size: '23px'
  };
}
}
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 { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ GaugeTooltipService ]
})
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);

Customizing the Linear Gauge container

The area used to render the ranges and pointers at the center position of the gauge is called container. It is of three types namely,

  • Normal
  • Rounded Rectangle
  • Thermometer

The type of the container can be modified by using the type property in container. The container can be customized by using the following properties in container.

  • offset - To place the container with the specified distance from the axis of the Linear Gauge.
  • width - To set the thickness of the container.
  • height - To set the length of the container.
  • backgroundColor - To set the background color of the container.
  • border - To set the color and width for the border of the container.

Normal

The ”Normal” type will render the container as a rectangle and this is the default container type.

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

@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" [container]='container'>
  <e-axes>
    <e-axis>
      <e-pointers>
        <e-pointer type="Bar" value=50>
        </e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-lineargauge>`
})

export class AppComponent implements OnInit {
public container: Object;
ngOnInit(): void {
    this.container = {
      width:30
  };
}
}
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 { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ GaugeTooltipService ]
})
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);

Rounded Rectangle

The ”RoundedRectangle” type will render the container as a rectangle with rounded corner radius. The rounded corner radius of the container can be customized using the roundedCornerRadius property in container.

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

@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" [container]='container'>
  <e-axes>
    <e-axis>
      <e-pointers>
        <e-pointer type="Bar" value=50>
        </e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-lineargauge>`
})

export class AppComponent implements OnInit {
public container: string;
ngOnInit(): void {
    this.container = {
        width:30,
        type: "RoundedRectangle"
    };
}
}
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 { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ GaugeTooltipService ]
})
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);

Thermometer

The ”Thermometer” type will render the container similar to the appearance of thermometer.

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

@Component({
selector: 'app-container',
template: `
 <ejs-lineargauge id="gauge-container" [container]='container'>
  <e-axes>
    <e-axis>
      <e-pointers>
        <e-pointer type="Bar" value=50>
        </e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-lineargauge>`
})

export class AppComponent implements OnInit {
public container: Object;
ngOnInit(): void {
  this.container = {
    width:30,
    type: "Thermometer"
  };
}
}
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 { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ GaugeTooltipService ]
})
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);

Fitting the Linear Gauge to the control

The Linear Gauge component is rendered with margin by default. To remove the margin around the Linear Gauge, the allowMargin property in ejs-lineargauge is set as ”false“.

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

@Component({
selector: 'app-container',
template: `
 <ejs-lineargauge id="gauge-container" [margin]='margin' [allowMargin]='isMargin'  orientation="Horizontal" background="skyblue" [border]='border'>
  <e-axes>
    <e-axis>
      <e-pointers>
        <e-pointer type="Bar" value=50>
        </e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-lineargauge>`
})

export class AppComponent implements OnInit {
public border: Object;
public margin: Object;
public isMargin: boolean;
ngOnInit(): void {
  this.isMargin = false;
  this.margin = {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
  this.border = {
    width:3,
    color: "red"
  };
}
}
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 { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ GaugeTooltipService ]
})
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);

Note: To use this feature, set the allowMargin property to ”false”, the width property to ”100%” and the properties of margin to ”0“.