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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<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, BrowserTransferStateModule } 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,
BrowserTransferStateModule,
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/
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'@angular/core': 'npm:@angular/core@12.2.17',
'@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17',
'@angular/forms': 'npm:@angular/forms@12.2.17',
'@angular/common': 'npm:@angular/common@12.2.17',
'@angular/compiler': 'npm:@angular/compiler@12.2.17',
'tslib': 'npm:tslib@2.3.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',
'devextreme': 'npm:devextreme@23.1.5/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@23.1.5/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.1',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.48',
'devextreme-angular': 'npm:devextreme-angular@23.1.5',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'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.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/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.11/inferno/package.json',
'npm:@angular/*/package.json',
'npm:@angular/common@12.2.17/*/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devextreme-angular@23.1.5/*/package.json',
'npm:devextreme-angular@23.1.5/ui/*/package.json',
'npm:devextreme-angular@23.1.5/package.json',
'npm:devexpress-diagram@2.2.1/package.json',
'npm:devexpress-gantt@4.1.48/package.json',
],
};
System.config(window.config);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/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.12.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>