Angular Gauges - Palette for Ranges

This demo shows how to combine scale values into ranges. The ranges are defined within the array assigned to the ranges property of the rangeContainer object. The colors for the ranges are taken from the predefined palette specified by the palette property.

Backend API

<dx-circular-gauge id="gauge" [value]="105"> <dxo-circular-gauge-scale [startValue]="50" [endValue]="150" [tickInterval]="10" > <dxo-circular-gauge-label [useRangeColors]="true" ></dxo-circular-gauge-label> </dxo-circular-gauge-scale> <dxo-circular-gauge-range-container palette="pastel"> <dxi-circular-gauge-range [startValue]="50" [endValue]="90" ></dxi-circular-gauge-range> <dxi-circular-gauge-range [startValue]="90" [endValue]="130" ></dxi-circular-gauge-range> <dxi-circular-gauge-range [startValue]="130" [endValue]="150" ></dxi-circular-gauge-range> </dxo-circular-gauge-range-container> <dxo-circular-gauge-export [enabled]="true"></dxo-circular-gauge-export> <dxo-circular-gauge-title text="Temperature of the Liquid in the Boiler"> <dxo-circular-gauge-font [size]="28"></dxo-circular-gauge-font> </dxo-circular-gauge-title> </dx-circular-gauge>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxCircularGaugeModule } from 'devextreme-angular'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxCircularGaugeModule, ], }) export class AppComponent { } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #gauge { height: 440px; width: 100%; }

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