Range Selector in Angular Stock Chart component

08 Apr 2021 / 1 minute to read

The left and right thumb of RangeNavigator are used to indicate the selected range in the large collection of data. Following are the ways you can select a range.

By dragging the thumbs.
By tapping on the labels.
By setting the start and end through Date Range button.

Following code example shows the enableSelector property allows users to toggle the visibility of range selector.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, OnInit } from '@angular/core';
import { chartData } from 'datasource.ts';

@Component({
selector: 'app-container',
template:
`<ejs-stockchart id="chart-container" [enableSelector]='enable' [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [crosshair]='crosshair'>
    <e-stockchart-series-collection>
        <e-stockchart-series [dataSource]='chartData' type='Candle' xName='date' yName='open' name='India' width=2 ></e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public primaryXAxis: Object;
public primaryYAxis: Object;
public chartData: Object[];
public title: string;
public crosshair: Object;
public enable: boolean = false;
ngOnInit(): void {
    this.chartData = chartData;
    this.title = 'Efficiency of oil-fired power production';
    this.primaryXAxis = {
       valueType: 'DateTime',
       crosshairTooltip: {enable:true}
    };
    this.primaryYAxis = {
       majorTickLines: { color: 'transparent', width: 0 },
       crosshairTooltip: {enable:true}
    };
    this.crosshair= {
        enable: true
    };
}

}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, DateTimeService, RangeTooltipService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule, StockChartAllModule, ChartAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AreaSeriesService, DateTimeService, 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);