Angular Charts - Discrete Axis Zooming and Panning

Discrete data support is one of many strengths of the Chart component. In this example, you can zoom data in the Chart using another DevExtreme JavaScript UI component, the RangeSelector.

Backend API

<div id="chart-demo"> <dx-chart id="zoomedChart" palette="soft" [dataSource]="chemicalComposition" title="The Chemical Composition of the Earth Layers" > @for(item of seriesSource; track item.name) { <dxi-chart-series [valueField]="item.valueField" [name]="item.name"> </dxi-chart-series> } <dxo-chart-common-series-settings type="bar" [ignoreEmptyPoints]="true"> </dxo-chart-common-series-settings> <dxi-chart-value-axis> <dxo-chart-label [customizeText]="customizeText"></dxo-chart-label> </dxi-chart-value-axis> <dxo-chart-argument-axis #argumentAxis> </dxo-chart-argument-axis> <dxo-chart-legend [visible]="true" verticalAlignment="top" horizontalAlignment="right" orientation="horizontal" > <dxo-chart-border [visible]="true"></dxo-chart-border> </dxo-chart-legend> </dx-chart> <dx-range-selector [dataSource]="chemicalComposition" [(value)]="argumentAxis.visualRange" > <dxo-range-selector-size [height]="120"></dxo-range-selector-size> <dxo-range-selector-margin [left]="10"></dxo-range-selector-margin> <dxo-range-selector-scale [minorTickCount]="1"></dxo-range-selector-scale> <dxo-range-selector-behavior valueChangeMode="onHandleMove" ></dxo-range-selector-behavior> <dxo-range-selector-chart palette="soft"> <dxo-range-selector-common-series-settings type="bar" [ignoreEmptyPoints]="true" > </dxo-range-selector-common-series-settings> @for(item of seriesSource; track item.name) { <dxi-range-selector-series [valueField]="item.valueField" [name]="item.name" > </dxi-range-selector-series> } </dxo-range-selector-chart> </dx-range-selector> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxRangeSelectorModule } from 'devextreme-angular'; import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart'; import { Service, ChemicalComposition, SeriesDescription } 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: [ DxChartModule, DxRangeSelectorModule, ], }) export class AppComponent { chemicalComposition: ChemicalComposition[]; seriesSource: SeriesDescription[]; constructor(service: Service) { this.chemicalComposition = service.getChemicalComposition(); this.seriesSource = service.getSeries(); } customizeText: DxChartTypes.ValueAxisLabel['customizeText'] = ({ valueText }) => `${valueText}%`; } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #zoomedChart { margin-bottom: 20px; }

import { Injectable } from '@angular/core'; export class ChemicalComposition { arg: string; Si?: number; Fe?: number; Ni?: number; S?: number; O?: number; Mg?: number; Al?: number; Ca?: number; Na?: number; K?: number; } export class SeriesDescription { name: string; valueField: string; } const chemicalComposition: ChemicalComposition[] = [{ arg: 'Inner Core', Si: 7.35, Fe: 79.39, Ni: 5.2, S: 2.3, O: 4.1, }, { arg: 'Outer Core', Si: 7.33, Fe: 78.56, Ni: 5.2, S: 2.7, O: 4.2, }, { arg: 'Lower Mantle', Si: 21.5, Fe: 5.8, O: 44.8, Mg: 22.8, Al: 2.2, Ca: 2.3, Na: 0.3, K: 0.03, }, { arg: 'Upper Mantle', Si: 28.1, Mg: 23.2, Fe: 4.3, Al: 1.2, Ca: 2.2, O: 40.3, Na: 0.2, }, { arg: 'Lower Crust', O: 46.6, Si: 27.7, Al: 8.1, Fe: 5, Ca: 3.6, Na: 2.8, K: 2.6, Mg: 1.5, }, { arg: 'Upper Crust', O: 47, Si: 29.5, Al: 8.05, Fe: 4.66, Ca: 2.96, Na: 2.5, K: 2.5, Mg: 1.87, }]; const seriesSource: SeriesDescription[] = [{ name: 'Si', valueField: 'Si', }, { name: 'Fe', valueField: 'Fe', }, { name: 'Ni', valueField: 'Ni', }, { name: 'S', valueField: 'S', }, { name: 'O', valueField: 'O', }, { name: 'Mg', valueField: 'Mg', }, { name: 'Al', valueField: 'Al', }, { name: 'K', valueField: 'K', }, { name: 'Na', valueField: 'Na', }]; @Injectable() export class Service { getChemicalComposition(): ChemicalComposition[] { return chemicalComposition; } getSeries(): SeriesDescription[] { return seriesSource; } }

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