Angular Gauges - Different Value Indicator Types

This demo illustrates all the available value indicator types for the LinearGauge.

Backend API

<div class="long-title"> <h3>Available Disk Space</h3> </div> <div id="gauge-demo"> <dx-linear-gauge id="c1" [value]="75"> <dxo-linear-gauge-value-indicator type="rectangle" color="#9B870C"> </dxo-linear-gauge-value-indicator> <dxo-linear-gauge-scale [startValue]="0" [endValue]="100" [tickInterval]="50" > <dxo-linear-gauge-label [customizeText]="customizeText" ></dxo-linear-gauge-label> </dxo-linear-gauge-scale> </dx-linear-gauge> <dx-linear-gauge id="c2" [value]="80"> <dxo-linear-gauge-value-indicator type="rhombus" color="#779ECB"> </dxo-linear-gauge-value-indicator> <dxo-linear-gauge-scale [startValue]="0" [endValue]="100" [tickInterval]="50" > <dxo-linear-gauge-label [customizeText]="customizeText" ></dxo-linear-gauge-label> </dxo-linear-gauge-scale> </dx-linear-gauge> <dx-linear-gauge id="c3" [value]="65"> <dxo-linear-gauge-value-indicator type="circle" color="#8FBC8F"> </dxo-linear-gauge-value-indicator> <dxo-linear-gauge-scale [startValue]="0" [endValue]="100" [tickInterval]="50" > <dxo-linear-gauge-label [customizeText]="customizeText" ></dxo-linear-gauge-label> </dxo-linear-gauge-scale> </dx-linear-gauge> <dx-linear-gauge id="c4" [value]="90"> <dxo-linear-gauge-value-indicator type="rangebar" color="#483D8B"> </dxo-linear-gauge-value-indicator> <dxo-linear-gauge-scale [startValue]="0" [endValue]="100" [tickInterval]="50" > <dxo-linear-gauge-label [customizeText]="customizeText" ></dxo-linear-gauge-label> </dxo-linear-gauge-scale> </dx-linear-gauge> <dx-linear-gauge id="c5" [value]="70"> <dxo-linear-gauge-value-indicator type="textCloud" color="#734F96"> </dxo-linear-gauge-value-indicator> <dxo-linear-gauge-scale [startValue]="0" [endValue]="100" [tickInterval]="50" > <dxo-linear-gauge-label [customizeText]="customizeText" ></dxo-linear-gauge-label> </dxo-linear-gauge-scale> </dx-linear-gauge> <dx-linear-gauge id="c6" [value]="85"> <dxo-linear-gauge-value-indicator type="triangleMarker" color="#f05b41"> </dxo-linear-gauge-value-indicator> <dxo-linear-gauge-scale [startValue]="0" [endValue]="100" [tickInterval]="50" > <dxo-linear-gauge-label [customizeText]="customizeText" ></dxo-linear-gauge-label> </dxo-linear-gauge-scale> </dx-linear-gauge> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxLinearGaugeModule, DxLinearGaugeTypes } from 'devextreme-angular/ui/linear-gauge'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxLinearGaugeModule, ], }) export class AppComponent { customizeText: DxLinearGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} %`; } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #gauge-demo { width: 100%; } ::ng-deep #c1, #c2, #c3, #c4, #c5, #c6 { height: 110px; } ::ng-deep .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>