Dimensions in Angular Linear gauge component

Size for Linear Gauge

The height and width of the Linear Gauge can be set using the width and height properties in ejs-lineargauge.

In Pixel

The size of the Linear Gauge can be set in pixel as demonstrated below.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge'
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge'



import { Component, OnInit } from '@angular/core';

@Component({
imports: [
         LinearGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-lineargauge id="gauge-container" width='350px' height='100px'></ejs-lineargauge>`
})
export class AppComponent {
}

main.ts

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, 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%.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge'
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge'



import { Component, OnInit } from '@angular/core';

@Component({
imports: [
         LinearGaugeModule
    ],

providers: [ GaugeTooltipService ],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-lineargauge id="gauge-container" width='100%' height='50%'></ejs-lineargauge>`
})
export class AppComponent {
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

 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.