Angular Gauges - Range Bar Base Value

By default, the RangeBar starts from the beginning of the LinerGauge scale. This demo illustrates how to use the baseValue property to specify the scale value from which the RangeBar should be drawn.

Backend API

<div class="long-title"> <h3>Deviation from the Target (Horizontal and Vertical)</h3> </div> <div id="gauge-demo"> <dx-circular-gauge id="c1" [value]="20"> <dxo-circular-gauge-value-indicator type="rangebar" [baseValue]="0"> </dxo-circular-gauge-value-indicator> <dxo-circular-gauge-geometry [startAngle]="135" [endAngle]="45"> </dxo-circular-gauge-geometry> <dxo-circular-gauge-scale [startValue]="45" [endValue]="-45" [tickInterval]="45" > <dxo-circular-gauge-label [customizeText]="customizeText" ></dxo-circular-gauge-label> </dxo-circular-gauge-scale> </dx-circular-gauge> <dx-linear-gauge id="c2" [value]="-10"> <dxo-linear-gauge-value-indicator [baseValue]="0" ></dxo-linear-gauge-value-indicator> <dxo-linear-gauge-geometry orientation="vertical" ></dxo-linear-gauge-geometry> <dxo-linear-gauge-scale [startValue]="-45" [endValue]="45" [tickInterval]="45" > <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 { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge'; import { DxLinearGaugeModule, DxLinearGaugeTypes } from 'devextreme-angular/ui/linear-gauge'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } type ScaleLabel = DxLinearGaugeTypes.ScaleLabel | DxCircularGaugeTypes.ScaleLabel; @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxLinearGaugeModule, DxCircularGaugeModule, ], }) export class AppComponent { customizeText: ScaleLabel['customizeText'] = ({ valueText }) => `${valueText}°`; } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #gauge-demo { height: 440px; width: 100%; } ::ng-deep #c1 { width: 70%; height: 100%; float: left; } ::ng-deep #c2 { width: 30%; height: 100%; float: left; } ::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>