Range step area in Angular Chart component
20 Dec 202312 minutes to read
Range step area
To render a range step area series, use series type
as RangeArea
and inject RangeAreaSeriesService
into the @NgModule.providers
.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
<e-series-collection>
<e-series [dataSource]='chartData' type='RangeStepArea' xName='x' high='high' low='low' name='India' opacity=0.4></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData: Object[] = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];
public title?: string;
public primaryYAxis?: Object;
ngOnInit(): void {
this.primaryXAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
this.primaryYAxis = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0,
maximum: 40,
majorTickLines: { width: 0 }
};
this.title = 'Monthly Temperature Range'
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, RangeAreaSeriesService, StepAreaSeriesService, StackingAreaSeriesService,
DateTimeService, CategoryService, MultiColoredAreaSeriesService, StackingStepAreaSeriesService, SplineRangeAreaSeriesService, RangeStepAreaSeriesService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, ChartAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ AreaSeriesService , RangeAreaSeriesService, StepAreaSeriesService, StackingAreaSeriesService, RangeStepAreaSeriesService,
DateTimeService, CategoryService, MultiColoredAreaSeriesService,StackingStepAreaSeriesService,SplineRangeAreaSeriesService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Series customization
The following properties can be used to customize the range step area
series.
- fill – Specifies the color of the area series.
- opacity – Specifies the opacity of fill.
- dashArray – Specifies the dashes of series.
- step – Specifies the position of the step for the series.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>
<e-series-collection>
<e-series [dataSource]='chartData' type='RangeStepArea' xName='x' high='high' low='low' opacity=0.4 fill='red' [border]='border' step='Center' dashArray='5,5'></e-series>
</e-series-collection>
</ejs-chart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData: Object[] = [
{ x: 'Jan', high: 14, low: 7, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 20, low: 7, high1: 32, low1: 22 }
];
public title?: string;
public primaryYAxis?: Object;
public border?: Object;
ngOnInit(): void {
this.primaryXAxis = {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
};
this.primaryYAxis = {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0,
maximum: 40,
majorTickLines: { width: 0 }
};
this.border={
width: 2,
color: 'black'
};
this.title = 'Monthly Temperature Range'
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, RangeStepAreaSeriesService, StepAreaSeriesService, StackingAreaSeriesService,
DateTimeService, CategoryService, MultiColoredAreaSeriesService, StackingStepAreaSeriesService, SplineRangeAreaSeriesService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, ChartAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ AreaSeriesService , RangeStepAreaSeriesService, StepAreaSeriesService, StackingAreaSeriesService, RangeStepAreaSeriesService,
DateTimeService, CategoryService, MultiColoredAreaSeriesService,StackingStepAreaSeriesService,SplineRangeAreaSeriesService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);