Angular Gauges - Subvalue Indicator Text Formatting

This demo shows how to format the text displayed by the subvalue indicator of the textCloud type. For this purpose, the text property of the subvalueIndicator configuration object is utilized.

Backend API

<dx-circular-gauge id="gauge" [value]="2200" [subvalues]="[2700]"> <dxo-circular-gauge-subvalue-indicator type="textcloud"> <dxo-circular-gauge-text [customizeText]="customizeText"> <dxo-circular-gauge-format type="thousands" [precision]="1" ></dxo-circular-gauge-format> </dxo-circular-gauge-text> </dxo-circular-gauge-subvalue-indicator> <dxo-circular-gauge-scale [startValue]="0" [endValue]="3000" [tickInterval]="500" > <dxo-circular-gauge-label [customizeText]="customizeText" ></dxo-circular-gauge-label> </dxo-circular-gauge-scale> <dxo-circular-gauge-export [enabled]="true"></dxo-circular-gauge-export> <dxo-circular-gauge-title text="Oven Temperature (includes Recommended)"> <dxo-circular-gauge-font [size]="28"></dxo-circular-gauge-font> </dxo-circular-gauge-title> </dx-circular-gauge>

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

::ng-deep #gauge { height: 440px; width: 100%; }

<!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>