Angular Gauges - Different Subvalue Indicator Types

This demo illustrates all the available subvalue indicator types for the CircularGauge.

Backend API

<div class="long-title"> <h3>Grades of Goods</h3> </div> <div id="gauge-demo"> <dx-circular-gauge id="triangleMarker" [value]="8" [subvalues]="[2, 8]"> <dxo-circular-gauge-subvalue-indicator type="triangleMarker" color="#8FBC8F" > </dxo-circular-gauge-subvalue-indicator> <dxo-circular-gauge-geometry [startAngle]="180" [endAngle]="0"> </dxo-circular-gauge-geometry> <dxo-circular-gauge-scale [startValue]="0" [endValue]="10" [tickInterval]="1" > </dxo-circular-gauge-scale> </dx-circular-gauge> <dx-circular-gauge id="rectangleNeedle" [value]="9" [subvalues]="[2, 8]"> <dxo-circular-gauge-subvalue-indicator type="rectangleNeedle" color="#9B870C" > </dxo-circular-gauge-subvalue-indicator> <dxo-circular-gauge-geometry [startAngle]="180" [endAngle]="0"> </dxo-circular-gauge-geometry> <dxo-circular-gauge-scale [startValue]="0" [endValue]="10" [tickInterval]="1" > </dxo-circular-gauge-scale> </dx-circular-gauge> <dx-circular-gauge id="triangleNeedle" [value]="5" [subvalues]="[2, 8]"> <dxo-circular-gauge-subvalue-indicator type="triangleNeedle" color="#779ECB" > </dxo-circular-gauge-subvalue-indicator> <dxo-circular-gauge-geometry [startAngle]="180" [endAngle]="0"> </dxo-circular-gauge-geometry> <dxo-circular-gauge-scale [startValue]="0" [endValue]="10" [tickInterval]="1" > </dxo-circular-gauge-scale> </dx-circular-gauge> <dx-circular-gauge id="textCloud" [value]="6" [subvalues]="[2, 8]"> <dxo-circular-gauge-subvalue-indicator type="textCloud" color="#f05b41"> </dxo-circular-gauge-subvalue-indicator> <dxo-circular-gauge-geometry [startAngle]="180" [endAngle]="0"> </dxo-circular-gauge-geometry> <dxo-circular-gauge-scale [startValue]="0" [endValue]="10" [tickInterval]="1" > </dxo-circular-gauge-scale> </dx-circular-gauge> <dx-circular-gauge id="twoColorNeedle" [value]="4" [subvalues]="[2, 8]"> <dxo-circular-gauge-subvalue-indicator type="twoColorNeedle" color="#779ECB" secondColor="#734F96" > </dxo-circular-gauge-subvalue-indicator> <dxo-circular-gauge-geometry [startAngle]="180" [endAngle]="0"> </dxo-circular-gauge-geometry> <dxo-circular-gauge-scale [startValue]="0" [endValue]="10" [tickInterval]="1" > </dxo-circular-gauge-scale> </dx-circular-gauge> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxCircularGaugeModule } from 'devextreme-angular'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxCircularGaugeModule, ], }) export class AppComponent { } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #gauge-demo { display: flex; flex-wrap: wrap; justify-content: center; } ::ng-deep #triangleMarker, ::ng-deep #rectangleNeedle, ::ng-deep #triangleNeedle, ::ng-deep #textCloud, ::ng-deep #twoColorNeedle { display: inline-block; width: 33%; } ::ng-deep #textCloud { width: 42%; } ::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>