The Angular range area chart is used to show variation in data values for a given time. It is like the area series, except that the area between the high and low ranges is filled.
Mark data points with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons. In addition to these shapes, use images to make the points more attractive.
Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle.
Handle missing data elegantly with empty points support.
The Angular range area chart can be transposed vertically to view the data from a different perspective.
Customize the color and border of the range area chart using built-in APIs.
Enable zooming and panning when dealing with large amounts of data to focus on particular ranges.
Easily get started with Angular Range Area using a few simple lines of JS code, as demonstrated below. Also explore our Angular Range Area Chart Example that shows you how to render and configure the range area chart component.
<ejs-chart style='display:block' id='chartcontainer' [primaryXAxis]='primaryXAxis'>
<e-series-collection>
<e-series [dataSource]='data' type='RangeArea' drawType= "Line" xName='x' high='high' low ='low'> </e-series>
</e-series-collection>
</ejs-chart>
//app.component.ts
import { Component } from '@angular/core';
export class AppComponent {
public data: Object[];
constructor () {
let series1: Object[] = [];
let value: number = 35;
let point1: Object;
for (let i: number = 1; i < 360; i++) {
if (Math.random() > .5) {
value += Math.random();
} else {
value -= Math.random();
}
point1 = {
x: new Date(2015, 0, i),
high: value, low: value - 10
};
series1.push(point1);
}
this.data = series1;
}
//Initializing Primary X Axis
public primaryXAxis: Object = {
valueType: 'DateTime',
};
}
//app.module.ts
import { ChartModule } from '@syncfusion/ej2-ng-charts';
import { RangeAreaSeriesService, DateTimeService} from '@syncfusion/ej2-ng-charts';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, ChartModule
],
providers: [ RangeAreaSeriesService, DateTimeService],
bootstrap: [AppComponent]
})
export class AppModule { }