The navigator can be customized using the navigatorStyleSettings
property. The selectedRegionColor
property is used to specify the color for selected region whereas the unSelectedRegionColor
property is used to specify the color for unselected region.
import { Component, OnInit } from '@angular/core';
import { datasrc } from 'datasource.ts'
@Component({
selector: 'app-container',
template:
`<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [navigatorStyleSettings]='navigatorStyle' labelFormat='MMM-yy'>
<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 navigatorStyle: Object;
ngOnInit(): void {
this.value = [new Date('2017-09-01'), new Date('2018-02-01')];
this.chartData = datasrc;
this.navigatorStyle = { unselectedRegionColor: 'skyblue', selectedRegionColor: 'pink' };
}
}
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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The thumb property provides options to customize the border, fill, size, and type of thumb. The types of thumb can be Circle
and Rectangle
.
import { Component, OnInit } from '@angular/core';
import { datasrc } from 'datasource.ts'
@Component({
selector: 'app-container',
template:
`<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [navigatorStyleSettings]='navigatorStyle' labelFormat='MMM-yy'>
<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 navigatorStyle: Object;
ngOnInit(): void {
this.value = [new Date('2017-09-01'), new Date('2018-02-01')];
this.chartData = datasrc;
this.navigatorStyle = { thumb:{ type: 'Rectangle', border: { width: 2, color: 'red'}, fill: 'pink' }};
}
}
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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Using the navigatorBorder
property, you can customize the width
and color
of the range navigator.
import { Component, OnInit } from '@angular/core';
import { datasrc } from 'datasource.ts'
@Component({
selector: 'app-container',
template:
`<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [navigatorBorder]='navigatorBorder' labelFormat='MMM-yy'>
<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 navigatorBorder: Object;
ngOnInit(): void {
this.value = [new Date('2017-09-01'), new Date('2018-02-01')];
this.chartData = datasrc;
this.navigatorBorder = { width: 4, color: 'green'};
}
}
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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
If the enableDeferredUpdate
property is set to true, then the changed event will be fired after dragging the slider. If the enableDeferredUpdate
is false, then the changed event will be fired when dragging the slider. By default, the enableDeferredUpdate
is set to false.
import { Component, OnInit, ViewChild } from '@angular/core';
import { datasrc } from 'datasource.ts';
import { IChangedEventArgs } from "@syncfusion/ej2-charts";
@Component({
selector: 'app-container',
template:
`<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [tooltip]='tooltip' [enableDeferredUpdate]='enableDeferredUpdate' (changed)='changed($event)'>
<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>
<ejs-chart #chart style='display:block;' id='chart' height='350' [primaryXAxis]='primaryXAxis' [tooltip]= 'tooltip'>
<e-series-collection>
<e-series [dataSource]='chartData' type='Area' xName='x' yName='y' width=2>
</e-series>
</e-series-collection>`
})
export class AppComponent implements OnInit {
@ViewChild('chart')
public chart: Chart;
public periodsValue: Object[];
public chartData: Object[];
public value: Object[];
public tooltip: Object;
public enableDeferredUpdate: booloean;
public changed: IChangedEventArgs;
public primaryXAxis: object;
public legendSettings: object;
ngOnInit(): void {
this.primaryXAxis = {
valueType: 'DateTime',
edgeLabelPlacement: 'Shift'
};
this.legendSettings= { visible: false };
this.chartData = datasrc;
this.value=[new Date('2017-09-01'), new Date('2018-02-01')];
this.tooltip={ enable: true };
this.enableDeferredUpdate = true;
this.changed = function(args) {
this.chart.primaryXAxis.zoomFactor = args.zoomFactor;
this.chart.primaryXAxis.zoomPosition = args.zoomPosition;
this.chart.dataBind();
}
}
}
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, StepLineSeriesService, RangeTooltipService} from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ChartModule, RangeNavigatorModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ AreaSeriesService, DateTimeService, StepLineSeriesService, RangeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The allowSnapping
property toggles the placement of the slider exactly to the left or on the nearest interval.
import { Component, OnInit } from '@angular/core';
import { datasrc } from 'datasource.ts'
@Component({
selector: 'app-container',
template:
`<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' labelFormat='MMM-yy' [allowSnapping]='allowSnapping'>
<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 allowSnapping: boolean;
ngOnInit(): void {
this.value = [new Date('2017-09-01'), new Date('2018-02-01')];
this.chartData = datasrc;
this.allowSnapping= true;
}
}
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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The speed of the animation can be controlled using the animationDuration
property. The default value of the animationDuration
property is 500 milliseconds.
import { Component, OnInit } from '@angular/core';
import { datasrc } from 'datasource.ts'
@Component({
selector: 'app-container',
template:
`<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' labelFormat='MMM-yy' [animationDuration]='animationDuration'>
<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 animationDuration: number;
ngOnInit(): void {
this.value = [new Date('2017-09-01'), new Date('2018-02-01')];
this.chartData = datasrc;
this.animationDuration=2000;
}
}
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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);