Angular Gauges - Bar Gauge

This demo illustrates how to bind an array of values to the BarGauge. Since an array can not be bound to a field as a regular value, it is bound as a computed one.

Backend API

<div class="long-title"><h3>Colors Representation via Basic Colors</h3></div> <div id="gauge-demo"> <dx-bar-gauge id="gauge" [values]="getBasicColors(currentColor)" [startValue]="0" [endValue]="255" [palette]="['#ff0000', '#00ff00', '#0000ff']" > <dxo-bar-gauge-label [visible]="false"></dxo-bar-gauge-label> </dx-bar-gauge> <div class="action-container"> <dx-select-box [width]="150" [inputAttr]="{ 'aria-label': 'Color' }" [dataSource]="colors" displayExpr="name" valueExpr="code" [(value)]="currentColor" > </dx-select-box> <div class="color-box" [style.backgroundColor]="currentColor"></div> </div> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxBarGaugeModule, DxSelectBoxModule } from 'devextreme-angular'; import { Color, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], imports: [ DxBarGaugeModule, DxSelectBoxModule, ], }) export class AppComponent { colors: Color[]; values: number[] = []; currentColor: string; constructor(service: Service) { this.colors = service.getColors(); this.currentColor = this.colors[0].code; } getBasicColors(value) { const code = Number(`0x${value.slice(1)}`); this.values[0] = (code >> 16) & 0xff; this.values[1] = (code >> 8) & 0xff; this.values[2] = code & 0xff; return this.values; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #gauge-demo { height: 440px; width: 100%; } ::ng-deep #gauge { width: 80%; height: 100%; margin-top: 20px; float: left; } ::ng-deep .action-container { width: 20%; text-align: left; margin-top: 20px; float: left; } ::ng-deep .color-box { width: 40px; height: 40px; margin-top: 20px; } ::ng-deep .long-title h3 { font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }

import { Injectable, } from '@angular/core'; export class Color { name: string; code: string; } const colors: Color[] = [{ name: 'Amaranth', code: '#e52b50', }, { name: 'Amethyst', code: '#9966cc', }, { name: 'Ash grey', code: '#b2beb5', }, { name: 'Barn red', code: '#7c0a02', }, { name: 'Imperial', code: '#602f6b', }, { name: 'Lemon lime', code: '#e3ff00', }, { name: 'Mountain Meadow', code: '#30ba8f', }, { name: 'Outer Space', code: '#414a4c', }, { name: 'Persian plum', code: '#701c1c', }, { name: 'Seal brown', code: '#321414', }, { name: 'Twilight lavender', code: '#8a496b', }, { name: 'Umber', code: '#635147', }]; @Injectable() export class Service { getColors(): Color[] { return colors; } }

<!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>