Angular Gauges - Tooltip and Legend

This demo shows how to enable and customize tooltips in the BarGauge component. A tooltip is a small pop-up rectangle that displays the value of the bar that is currently hovered over. To enable the tooltips, set the tooltip.enabled property to true. In this demo, the text displayed by the tooltips is customized.

Backend API

<dx-bar-gauge id="gauge" [startValue]="0" [endValue]="200" [values]="[121.4, 135.4, 115.9, 141.1, 127.5]" > <dxo-bar-gauge-label [visible]="false"></dxo-bar-gauge-label> <dxo-bar-gauge-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip" ></dxo-bar-gauge-tooltip> <dxo-bar-gauge-export [enabled]="true"></dxo-bar-gauge-export> <dxo-bar-gauge-title text="Average Speed by Racer"> <dxo-bar-gauge-font [size]="28"></dxo-bar-gauge-font> </dxo-bar-gauge-title> <dxo-bar-gauge-legend [visible]="true" verticalAlignment="bottom" horizontalAlignment="center" [customizeText]="customizeText" > </dxo-bar-gauge-legend> </dx-bar-gauge>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxBarGaugeModule } from 'devextreme-angular'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxBarGaugeModule, ], }) export class AppComponent { getText(item, text) { return `Racer ${item.index + 1} - ${text} km/h`; } customizeTooltip = (arg) => ({ text: this.getText(arg, arg.valueText), }); customizeText = (arg) => this.getText(arg.item, arg.text); } 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>