You can set width and height to the element of the container. It determines the gauge size. Also, you can set the size via inline or CSS as demonstrated below.
<div id='container'>
<div id='circular-container' style="width:650px; height:350px;"></div>
</div>import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {
// Initialize objects
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, CircularGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);You can also set size for the gauge directly through width
and height properties.
In Pixel
You can set the size of the gauge in pixel as demonstrated below.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container" width="650" height="350">
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {
// Initialize objects
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, CircularGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);In Percentage
By setting value in percentage, gauge gets its dimension with respect to its container. For example, when the height is ‘50%’, gauge renders to half of the container height.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container" width="80%" height="50%">
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {
// Initialize objects
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, CircularGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
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 you do not specify the size, it takes 450px as the height and window size as its width.