The height and width of the Linear Gauge can be set using the width
and height
properties in ejs-lineargauge
.
The size of the Linear Gauge can be set in pixel as demonstrated below.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template:
`<ejs-lineargauge id="gauge-container" width='350px' height='100px'></ejs-lineargauge>`
})
export class AppComponent {
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
By setting value in percentage, Linear Gauge receives its dimension matching to its parent. For example, when the height is set as 50%, Linear Gauge renders to half of the parent height. The Linear Gauge will be responsive when the width is set as 100%.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template:
`<ejs-lineargauge id="gauge-container" width='100%' height='50%'></ejs-lineargauge>`
})
export class AppComponent {
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Note: When the component’s size is not specified, the height will be 450px and the width will be the same as the parent element’s width.