Customization in Angular Range navigator component
20 Sep 202217 minutes to read
Navigator appearance
The Range Selector can be customized by using the navigatorStyleSettings
. The selectedRegionColor
property is used to specify the color for the selected region, whereas the unselectedRegionColor
property is used to specify the color for the 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);
Thumb
The thumb property allows to customize the border, fill color, size, and type of thumb. Thumbs can be of two shapes: 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);
Border customization
Using the navigatorBorder
, the width
and color
of the Range Selector border can be customized.
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);
Deferred update
If the enableDeferredUpdate
property is set to true, then the changed event will be triggered after dragging the slider. If the enableDeferredUpdate
is false, then the changed event will be triggered 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);
Allow snapping
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);
Animation
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);