admin

Please wait...

ngx-gauge

Install

                         	
npm install --save ngx-gauge
							
						

Chart Module

After Installing, include NgxGaugeModule in your ChartsModule class in chart.module.ts would look like this:


                         	
import { NgxGaugeModule } from 'ngx-gauge';

@NgModule({
    ...
    imports: [NgxGaugeModule],
    ...
    })
export class AppModule { }  

							
						

Gauge Markup

ngxchart.component.html would look like this


                         	
<ngx-gauge
    [type]="gaugeType" 
    [value]="gaugeValue" 
    [label]="gaugeLabel"  
    [append]="gaugeAppendText">>
</ngx-gauge>
							
						

Gauge TS code

ngxchart.component.ts would look like this


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

@Component({
    selector: 'app-ngxchart',
    templateUrl: './ngxchart.component.html',
    styleUrls: ['./ngxchart.component.scss'],
})
export class NgxchartComponent {
    
    gaugeType = "semi";
    gaugeValue = 28.3;
    gaugeLabel = "Speed";
    gaugeAppendText = "km/hr";
}
							
						

Referral Url