Angular Charts - Range Area

Range area series can be used to display value ranges corresponding to specified arguments. Data is displayed as a color filled space between the line that joins the beginning and the line that joins the end series points.

www.kaggle.com

Backend API

<dx-chart id="chart" palette="violet" title="Annual Inflation Rate in 2024 and 2025" [dataSource]="inflationData" > <dxo-chart-common-series-settings argumentField="date" type="rangeArea" ></dxo-chart-common-series-settings> <dxi-chart-value-axis [tickInterval]="0.5" [valueMarginsEnabled]="false" [visualRange]="{ startValue: 0.5, endValue: 4 }" > <dxo-chart-label [customizeText]="customizeValueAxisText"> <dxo-chart-format type="fixedPoint" [precision]="2"></dxo-chart-format> </dxo-chart-label> </dxi-chart-value-axis> <dxo-chart-argument-axis [valueMarginsEnabled]="false"> <dxo-chart-label format="month"></dxo-chart-label> </dxo-chart-argument-axis> <dxo-chart-export [enabled]="true"></dxo-chart-export> <dxo-chart-legend [visible]="false"></dxo-chart-legend> <dxi-chart-series rangeValue1Field="val2024" rangeValue2Field="val2025" name="2024 - 2025" ></dxi-chart-series> </dx-chart>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxChartModule } from 'devextreme-angular'; import { InflationEntry, 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: [ DxChartModule, ], }) export class AppComponent { inflationData: InflationEntry[]; constructor(service: Service) { this.inflationData = service.getInflationData(); } customizeValueAxisText(args) { return `${args.valueText} %`; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #chart { height: 440px; }

import { Injectable, } from '@angular/core'; export class InflationEntry { date: Date; val2024: number; val2025: number; } const inflationEntries: InflationEntry[] = [{ date: new Date(2024, 0, 1), val2024: 1.63, val2025: 2.63, }, { date: new Date(2024, 1, 1), val2024: 2.11, val2025: 2.14, }, { date: new Date(2024, 2, 1), val2024: 2.68, val2025: 2.31, }, { date: new Date(2024, 3, 1), val2024: 3.16, val2025: 2.24, }, { date: new Date(2024, 4, 1), val2024: 3.57, val2025: 2.02, }, { date: new Date(2024, 5, 1), val2024: 3.56, val2025: 1.05, }, { date: new Date(2024, 6, 1), val2024: 3.63, val2025: 1.24, }, { date: new Date(2024, 7, 1), val2024: 3.77, val2025: 1.15, }, { date: new Date(2024, 8, 1), val2024: 3.87, val2025: 1.14, }, { date: new Date(2024, 9, 1), val2024: 3.53, val2025: 1.17, }, { date: new Date(2024, 10, 1), val2024: 3.39, val2025: 1.14, }, { date: new Date(2024, 11, 1), val2024: 2.96, val2025: 1.50, }]; @Injectable() export class Service { getInflationData(): InflationEntry[] { return inflationEntries; } }

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