Loading...
Loading...
Create and customize Syncfusion Angular Linear Gauge components for displaying measurements and metrics. Use this skill when user needs to implement a linear gauge, display scalar values in a linear scale, create measurement interfaces, configure ranges and pointers, add annotations, handle user interactions, or customize gauge appearance. Covers installation, configuration, events, accessibility, printing, and internationalization.
npx skill4agent add syncfusion/angular-ui-components-skills syncfusion-angular-linear-gaugeimport { Component, OnInit } from '@angular/core';
import { LinearGaugeAllModule } from '@syncfusion/ej2-angular-gauges';
@Component({
selector: 'app-linear-gauge',
template: `
<ejs-lineargauge
[orientation]="'Horizontal'"
[container]="{ width: '100', height: '150' }">
<e-axes>
<e-axis [minimum]="0" [maximum]="100"
[majorTicks]="majorTicks"
[minorTicks]="minorTicks">
<e-ranges>
<e-range [start]="0" [end]="30" [color]="'#F6B53F'"></e-range>
<e-range [start]="30" [end]="70" [color]="'#0DC451'"></e-range>
<e-range [start]="70" [end]="100" [color]="'#F64C38'"></e-range>
</e-ranges>
<e-pointers>
<e-pointer [value]="45" [type]="'Bar'"></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-lineargauge>
`
})
export class LinearGaugeComponent implements OnInit {
majorTicks = { interval: 20 };
minorTicks = { interval: 5 };
ngOnInit(): void {
// Component initialized
}
}<e-axis [minimum]="0" [maximum]="50">
<e-ranges>
<e-range [start]="0" [end]="15" [color]="'#3498db'" ></e-range>
<e-range [start]="15" [end]="30" [color]="'#2ecc71'" ></e-range>
<e-range [start]="30" [end]="50" [color]="'#e74c3c'" ></e-range>
</e-ranges>
<e-pointers>
<e-pointer [value]="currentTemp" [type]="'Marker'"></e-pointer>
</e-pointers>
</e-axis><e-pointer
[value]="gaugeValue"
[type]="'Bar'"
enableDrag=true
[markerType]="'Circle'"
(dragEnd)='dragEnd($event)'>
</e-pointer>
dragEnd(args: IPointerDragEventArgs): void {
this.gaugeValue = event.currentValue;
console.log('Gauge value changed to:', this.gaugeValue);
}<e-pointers>
<e-pointer [value]="actualValue" [type]="'Bar'" [color]="'#0066cc'"></e-pointer>
<e-pointer [value]="targetValue" [type]="'Marker'" [color]="'#ff6600'"></e-pointer>
</e-pointers>| Property | Type | Purpose |
|---|---|---|
| 'Horizontal' | 'Vertical' | Direction of the gauge |
| number | Gauge width (e.g., '100', '300') |
| number | Gauge height (e.g., '150') |
| number | Minimum value on scale |
| number | Maximum value on scale |
| number | Range start value |
| number | Range end value |
| string | Range color (hex or named) |
| number | Current pointer value |
| 'Bar' | 'Marker' | Pointer visual style |
| number | Enable pointer animations, if greater than 0 |
| method | Export as PNG/PDF |