DevExtreme v23.2 is now available.

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

Your search did not match any results.

Different Subvalue Indicator Types

Documentation

This demo illustrates all the available subvalue indicator types for the CircularGauge.

Backend API
<div class="long-title"> <h3>Grades of Goods</h3> </div> <div id="gauge-demo"> <dx-circular-gauge id="triangleMarker" [value]="8" [subvalues]="[2, 8]"> <dxo-subvalue-indicator type="triangleMarker" color="#8FBC8F"> </dxo-subvalue-indicator> <dxo-geometry [startAngle]="180" [endAngle]="0"> </dxo-geometry> <dxo-scale [startValue]="0" [endValue]="10" [tickInterval]="1"> </dxo-scale> </dx-circular-gauge> <dx-circular-gauge id="rectangleNeedle" [value]="9" [subvalues]="[2, 8]"> <dxo-subvalue-indicator type="rectangleNeedle" color="#9B870C"> </dxo-subvalue-indicator> <dxo-geometry [startAngle]="180" [endAngle]="0"> </dxo-geometry> <dxo-scale [startValue]="0" [endValue]="10" [tickInterval]="1"> </dxo-scale> </dx-circular-gauge> <dx-circular-gauge id="triangleNeedle" [value]="5" [subvalues]="[2, 8]"> <dxo-subvalue-indicator type="triangleNeedle" color="#779ECB"> </dxo-subvalue-indicator> <dxo-geometry [startAngle]="180" [endAngle]="0"> </dxo-geometry> <dxo-scale [startValue]="0" [endValue]="10" [tickInterval]="1"> </dxo-scale> </dx-circular-gauge> <dx-circular-gauge id="textCloud" [value]="6" [subvalues]="[2, 8]"> <dxo-subvalue-indicator type="textCloud" color="#f05b41"> </dxo-subvalue-indicator> <dxo-geometry [startAngle]="180" [endAngle]="0"> </dxo-geometry> <dxo-scale [startValue]="0" [endValue]="10" [tickInterval]="1"> </dxo-scale> </dx-circular-gauge> <dx-circular-gauge id="twoColorNeedle" [value]="4" [subvalues]="[2, 8]"> <dxo-subvalue-indicator type="twoColorNeedle" color="#779ECB" secondColor="#734F96" > </dxo-subvalue-indicator> <dxo-geometry [startAngle]="180" [endAngle]="0"> </dxo-geometry> <dxo-scale [startValue]="0" [endValue]="10" [tickInterval]="1"> </dxo-scale> </dx-circular-gauge> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxCircularGaugeModule } from 'devextreme-angular'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], }) export class AppComponent { } @NgModule({ imports: [ BrowserModule, BrowserTransferStateModule, DxCircularGaugeModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #gauge-demo { display: flex; flex-wrap: wrap; justify-content: center; } ::ng-deep #triangleMarker, ::ng-deep #rectangleNeedle, ::ng-deep #triangleNeedle, ::ng-deep #textCloud, ::ng-deep #twoColorNeedle { display: inline-block; width: 33%; } ::ng-deep #textCloud { width: 42%; } ::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; }
// 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.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, }, }, 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.6.2/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.2.5/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@23.2.5/bundles/dx.all.js', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51', 'devextreme-angular': 'npm:devextreme-angular@23.2.5', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12', '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.12/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.2.5/*/package.json', 'npm:devextreme-angular@23.2.5/ui/*/package.json', 'npm:devextreme-angular@23.2.5/package.json', 'npm:devexpress-diagram@2.2.5/package.json', 'npm:devexpress-gantt@4.1.51/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.2.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>