DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Overview

DevExtreme Angular Gauge controls help you visualize data and create dashboards. Our library includes three gauge types: radial bar gauges, circular scale gauges, and linear gauges.

This demo displays a simple dashboard with a few highly customized gauges.

Review other demos in this section to explore gauge features such as geometry customization, palettes, tooltips, and custom label display.

Our gauge controls also support Native Angular features: AOT compilation, declarative configuration, and TypeScript compile-time checking.

Backend API
<div id="gauge-demo"> <div id="gauge-container"> <div class="left-section"> <dx-circular-gauge [value]="speedValue / 2"> <dxo-size [width]="90" [height]="90"></dxo-size> <dxo-value-indicator [color]="color"> </dxo-value-indicator> <dxo-geometry [startAngle]="180" [endAngle]="90"> </dxo-geometry> <dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="50"> </dxo-scale> </dx-circular-gauge> <dx-circular-gauge [value]="speedValue / 2"> <dxo-size [width]="90" [height]="90"></dxo-size> <dxo-value-indicator [color]="color"></dxo-value-indicator> <dxo-geometry [startAngle]="-90" [endAngle]="-180"> </dxo-geometry> <dxo-scale [startValue]="100" [endValue]="0" [tickInterval]="50"> </dxo-scale> </dx-circular-gauge> </div> <div class="center-section"> <dx-circular-gauge id="speed-gauge" [value]="speedValue" centerTemplate="centerTemplate" > <dxo-size [width]="260"></dxo-size> <dxo-value-indicator [indentFromCenter]="55" [color]="color" [spindleSize]="0" [spindleGapSize]="0" > </dxo-value-indicator> <dxo-geometry [startAngle]="225" [endAngle]="315"> </dxo-geometry> <dxo-scale [startValue]="20" [endValue]="200" [tickInterval]="20" [minorTickInterval]="10" > </dxo-scale> <svg *dxTemplate="let gauge of 'centerTemplate'"> <circle cx="100" cy="100" r="55" [attr.stroke]="color" stroke-width="2" fill="transparent" ></circle> <text text-anchor="middle" y="100" x="100" font-size="50" font-weight="lighter" alignment-baseline="middle" [attr.fill]="color" > {{ gauge.value() }} </text> </svg> </dx-circular-gauge> <dx-linear-gauge id="fuel-gauge" [value]="50 - speedValue * 0.24"> <dxo-size [width]="90" [height]="20"></dxo-size> <dxo-scale [startValue]="0" [endValue]="50" [tickInterval]="25" [minorTickInterval]="12.5" > <dxo-minor-tick [visible]="true"></dxo-minor-tick> <dxo-label [visible]="false"></dxo-label> </dxo-scale> <dxo-value-indicator [color]="color" [size]="8" [offset]="7"> </dxo-value-indicator> </dx-linear-gauge> </div> <div class="right-section"> <dx-circular-gauge [value]="speedValue / 2"> <dxo-size [width]="90" [height]="90"></dxo-size> <dxo-value-indicator [color]="color"> </dxo-value-indicator> <dxo-geometry [startAngle]="90" [endAngle]="0"> </dxo-geometry> <dxo-scale [startValue]="100" [endValue]="0" [tickInterval]="50"> </dxo-scale> </dx-circular-gauge> <dx-circular-gauge [value]="speedValue / 2"> <dxo-size [width]="90" [height]="90"></dxo-size> <dxo-value-indicator [color]="color"></dxo-value-indicator> <dxo-geometry [startAngle]="0" [endAngle]="-90"> </dxo-geometry> <dxo-scale [startValue]="0" [endValue]="100" [tickInterval]="50"> </dxo-scale> </dx-circular-gauge> </div> </div> <dx-slider id="slider" [min]="0" [max]="200" [width]="155" [(value)]="speedValue" > </dx-slider> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxCircularGaugeModule, DxLinearGaugeModule, DxSliderModule } from 'devextreme-angular'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], preserveWhitespaces: true, }) export class AppComponent { speedValue = 40; color = '#f05b41'; } @NgModule({ imports: [ BrowserModule, DxCircularGaugeModule, DxLinearGaugeModule, DxSliderModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #gauge-demo { height: 500px; } ::ng-deep #gauge-container { text-align: center; margin: 20px auto; background-image: url('../../../../images/Gauges/mask.png'); background-repeat: no-repeat; width: 786px; height: 500px; } ::ng-deep #gauge-container > div { display: inline-block; position: relative; } ::ng-deep .left-section { top: -20px; left: -40px; } ::ng-deep .center-section { top: 25px; } ::ng-deep .right-section { top: -20px; right: -40px; } ::ng-deep #fuel-gauge { position: absolute; left: 34%; bottom: 5%; } ::ng-deep #slider { position: relative; top: -105px; margin: 0 auto; } ::ng-deep #slider .dx-slider-bar { background-color: #fff; } ::ng-deep #slider .dx-slider-handle { background-color: #f05b41; width: 16px; height: 16px; margin-top: -8px; margin-right: -8px; border-radius: 50%; border: none; } ::ng-deep #slider .dx-slider-handle .dx-inkripple-wave { background: none; } ::ng-deep #slider .dx-slider-handle::after { background-color: #f05b41; } ::ng-deep #slider .dx-slider-range.dx-slider-range-visible { border-color: #f05b41; background-color: #f05b41; }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ const componentNames = [ 'accordion', 'action-sheet', 'autocomplete', 'bar-gauge', 'box', 'bullet', 'button-group', 'button', 'calendar', 'chart', 'check-box', 'circular-gauge', 'color-box', 'context-menu', 'data-grid', 'date-box', 'date-range-box', 'defer-rendering', 'diagram', 'draggable', 'drawer', 'drop-down-box', 'drop-down-button', 'file-manager', 'file-uploader', 'filter-builder', 'form', 'funnel', 'gallery', 'gantt', 'html-editor', 'linear-gauge', 'list', 'load-indicator', 'load-panel', 'lookup', 'map', 'menu', 'multi-view', 'nested', 'number-box', 'pie-chart', 'pivot-grid-field-chooser', 'pivot-grid', 'polar-chart', 'popover', 'popup', 'progress-bar', 'radio-group', 'range-selector', 'range-slider', 'recurrence-editor', 'resizable', 'responsive-box', 'sankey', 'scheduler', 'scroll-view', 'select-box', 'slider', 'sortable', 'sparkline', 'speed-dial-action', 'splitter', 'switch', 'tab-panel', 'tabs', 'tag-box', 'text-area', 'text-box', 'tile-view', 'toast', 'toolbar', 'tooltip', 'tree-list', 'tree-map', 'tree-view', 'validation-group', 'validation-summary', 'validator', 'vector-map', ]; window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, '@angular/platform-browser-dynamic': { 'esModule': true, }, '@angular/platform-browser': { 'esModule': true, }, '@angular/core': { 'esModule': true, }, '@angular/common': { 'esModule': true, }, '@angular/common/http': { 'esModule': true, }, '@angular/animations': { 'esModule': true, }, '@angular/forms': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', 'bundles:': '../../../../bundles/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', /* @angular */ '@angular/compiler': 'bundles:@angular/compiler.umd.js', '@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js', '@angular/core': 'bundles:@angular/core.umd.js', '@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js', '@angular/common': 'bundles:@angular/common.umd.js', '@angular/common/http': 'bundles:@angular/common-http.umd.js', '@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js', '@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js', '@angular/forms': 'bundles:@angular/forms.umd.js', /* devextreme */ 'devextreme': 'npm:devextreme@24.1.3/cjs', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'devextreme/bundles/dx.all': 'npm:devextreme@24.1.3/bundles/dx.all.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.8', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56', /* devextreme-angular umd maps */ 'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js', 'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js', ...componentNames.reduce((acc, name) => { acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`; return acc; }, {}), 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'tslib': 'npm:tslib@2.6.1/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devexpress-diagram@2.2.8/package.json', 'npm:devexpress-gantt@4.1.56/package.json', ], }; System.config(window.config); // System.import('@angular/compiler').catch(console.error.bind(console));
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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/24.1.3/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.13.0/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>
NOTE

Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.

The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.

The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).

The Web Dashboard is available as a part of a Universal subscription.

Get Started with DevExpress BI Dashboard | Explore Demos