Angular Gauges - Title and Center Label Customization

This demo shows how to specify a CircularGauge title and display custom labels in the component's center.

A CircularGauge title usually informs users about the nature of gauge data. To customize it, use the properties of the title configuration object:

Location
Use the horizontalAlignment and verticalAlignment properties to place a title on any side of your gauge.
Font Settings
Use the font configuration object.

You can display a custom label in the center of a CircularGauge. Use the centerTemplate property. Render template content as an SVG element.

Backend API

<dx-circular-gauge id="gauge" [value]="7.78" centerTemplate="centerTemplate"> <dxo-circular-gauge-scale [startValue]="0" [endValue]="10" [tickInterval]="1"> <dxo-circular-gauge-minor-tick [visible]="true" ></dxo-circular-gauge-minor-tick> </dxo-circular-gauge-scale> <dxo-circular-gauge-export [enabled]="true"></dxo-circular-gauge-export> <dxo-circular-gauge-range-container backgroundColor="#03a9f4" ></dxo-circular-gauge-range-container> <dxo-circular-gauge-value-indicator color="#03a9f4" ></dxo-circular-gauge-value-indicator> <dxo-circular-gauge-title text="Gold Production (in Kilograms)" verticalAlignment="bottom" > <dxo-circular-gauge-font [size]="25"></dxo-circular-gauge-font> <dxo-circular-gauge-margin top="25"></dxo-circular-gauge-margin> </dxo-circular-gauge-title> <svg *dxTemplate="let gauge of 'centerTemplate'"> <rect x="0" y="0" width="200" height="200" fill="transparent"></rect> <g transform="translate(50 0)"> <rect x="0" y="0" width="100" height="70" rx="8" fill="#f2f2f2"></rect> <text text-anchor="middle" y="27" x="50" fill="#000" font-size="20"> <tspan x="50">{{ gauge.value() }}</tspan> <tspan x="50" dy="30">kg</tspan> </text> </g> <g transform="translate(43 140)"> <rect class="description" x="0" y="0" width="114" height="56" rx="8" fill="#fff" ></rect> <text text-anchor="start" y="23" x="15" fill="#000" font-size="12"> <tspan x="15">Capacity: 10 kg</tspan> <tspan x="15" dy="20">Graduation: 10 g</tspan> </text> </g> </svg> </dx-circular-gauge>

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 { height: 440px; width: 100%; } ::ng-deep .description { filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); }

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