Series types in Angular Range navigator component
27 Sep 20238 minutes to read
To render the data, the Range Selector supports three types of series.
Line
To render a line series, use series type
as Line and inject the LineSeriesService
into the @NgModule.providers
. By default, the line series is rendered in the Range Selector .
import { Component, OnInit } from '@angular/core';
import { datasrc } from './datasource'
@Component({
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='Line' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public value?: Object[];
public chartData?: Object[];
public tooltip?: Object[];
public labelFormat?: string;
ngOnInit(): void {
this.value = [new Date('2017-09-01'), new Date('2018-02-01')];
this.chartData = datasrc;
this.labelFormat = 'MMM-yy';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import { LineSeriesService, DateTimeService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, RangeNavigatorModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ LineSeriesService, DateTimeService ]
})
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);
Area
To render an area series, use series type
as Area and inject AreaSeriesService
into the @NgModule.providers
.
import { Component, OnInit } from '@angular/core';
import { datasrc } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public value?: Object[];
public chartData?: Object[];
public tooltip?: Object[];
public labelFormat?: string;
ngOnInit(): void {
this.value = [new Date('2017-09-01'), new Date('2018-02-01')];
this.chartData = datasrc;
this.labelFormat = 'MMM-yy';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, DateTimeService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, RangeNavigatorModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ AreaSeriesService, DateTimeService ]
})
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);
StepLine
To render a Step line series, use series Type as Step Line and inject StepLineSeries
into the @NgModule.providers
.
import { Component, OnInit } from '@angular/core';
import { datasrc } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-rangenavigator id="rn-container" [value]='value'>
<e-rangenavigator-series-collection>
<e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public value?: Object[];
public chartData?: Object[];
public tooltip?: Object[];
public labelFormat?: string;
ngOnInit(): void {
this.value = [12,30];
this.chartData = datasrc;
this.labelFormat = 'MMM-yy';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import { StepLineSeriesService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, RangeNavigatorModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ StepLineSeriesService ]
})
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);