Angular Range Selector - Numeric Scale

In this demo, data used to define the RangeSelector scale comes in the string type. However, there is the valueType property that specifies the actual data type of the scale. As this property is set to «numeric», the string data will be cast to the numeric type.

Backend API

<dx-range-selector id="range-selector" [value]="['1', '2']" title="Select a Product Weight" [dataSource]="dataSource" > <dxo-range-selector-margin [top]="50"></dxo-range-selector-margin> <dxo-range-selector-scale valueType="numeric"></dxo-range-selector-scale> <dxo-range-selector-chart> <dxi-range-selector-series valueField="appleCost" color="#00ff00" ></dxi-range-selector-series> <dxi-range-selector-series valueField="orangeCost" color="#ffa500" ></dxi-range-selector-series> <dxo-range-selector-common-series-settings type="spline" argumentField="weight" > </dxo-range-selector-common-series-settings> </dxo-range-selector-chart> </dx-range-selector>

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

::ng-deep #range-selector { height: 400px; }

import { Injectable } from '@angular/core'; export class Product { weight: string; appleCost: number; orangeCost: number; } const products: Product[] = [ { weight: '1', appleCost: 3, orangeCost: 7 }, { weight: '2', appleCost: 20, orangeCost: 14 }, { weight: '3', appleCost: 21, orangeCost: 21 }, { weight: '4', appleCost: 22, orangeCost: 28 }, { weight: '5', appleCost: 25, orangeCost: 35 }, { weight: '6', appleCost: 30, orangeCost: 42 }, { weight: '7', appleCost: 35, orangeCost: 44 }, { weight: '8', appleCost: 42, orangeCost: 45 }, { weight: '9', appleCost: 49, orangeCost: 46 }, { weight: '10', appleCost: 60, orangeCost: 47 }, ]; @Injectable() export class Service { getProducts(): Product[] { return products; } }

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