Your search did not match any results.
Linear Gauge

Different Subvalue Indicator Types

Documentation
This demo illustrates all the available subvalue indicator types for the LinearGauge.
Copy to Plunker
Apply
Reset
<div class="long-title"> <h3>Current Price (with Min and Max)</h3> </div> <div id="gauge-demo"> <dx-linear-gauge id="c1" [value]="24" [subvalues]="[18, 43]"> <dxo-subvalue-indicator type="rectangle" color="#9B870C"> </dxo-subvalue-indicator> <dxo-scale [startValue]="10" [endValue]="50" [tickInterval]="10"> <dxo-label [customizeText]="customizeText"></dxo-label> </dxo-scale> </dx-linear-gauge> <dx-linear-gauge id="c2" [value]="38" [subvalues]="[18, 43]"> <dxo-subvalue-indicator type="rhombus" color="#779ECB"> </dxo-subvalue-indicator> <dxo-scale [startValue]="10" [endValue]="50" [tickInterval]="10"> <dxo-label [customizeText]="customizeText"></dxo-label> </dxo-scale> </dx-linear-gauge> <dx-linear-gauge id="c3" [value]="21" [subvalues]="[18, 43]"> <dxo-subvalue-indicator type="circle" color="#8FBC8F"> </dxo-subvalue-indicator> <dxo-scale [startValue]="10" [endValue]="50" [tickInterval]="10"> <dxo-label [customizeText]="customizeText"></dxo-label> </dxo-scale> </dx-linear-gauge> <dx-linear-gauge id="c4" [value]="42" [subvalues]="[18, 43]"> <dxo-subvalue-indicator type="textCloud" color="#734F96"> </dxo-subvalue-indicator> <dxo-scale [startValue]="10" [endValue]="50" [tickInterval]="10"> <dxo-label [customizeText]="customizeText"></dxo-label> </dxo-scale> </dx-linear-gauge> <dx-linear-gauge id="c5" [value]="28" [subvalues]="[18, 43]"> <dxo-subvalue-indicator type="triangleMarker" color="#f05b41"> </dxo-subvalue-indicator> <dxo-scale [startValue]="10" [endValue]="50" [tickInterval]="10"> <dxo-label [customizeText]="customizeText"></dxo-label> </dxo-scale> </dx-linear-gauge> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxLinearGaugeModule } 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 { customizeText(arg: any) { return "$" + arg.valueText; } } @NgModule({ imports: [ BrowserModule, DxLinearGaugeModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
/deep/ #gauge-demo { text-align: center; width: 100%; } /deep/ #c1, #c2, #c3, #c4, #c5 { height: 110px; } /deep/ #c4 { width: 107%; margin-left: -40px; } /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://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js', 'typescript': 'npm:typescript@2.2.2/lib/typescript.js', '@angular/core': 'npm:@angular/core@4.1.0/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@4.1.0/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@4.1.0/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.0/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@4.1.0/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@4.1.0/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@4.1.0/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.3.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme': 'npm:devextreme@17.1', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'devextreme-angular': 'npm:devextreme-angular@17.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!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/17.1.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/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>