Range Selector in Angular Stock Chart component

27 Jul 2021 / 2 minutes 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.

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" [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;
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);

Visibility of range selector

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);