Search results

Range Selector in Angular Stock Chart component

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.

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

    selector: 'app-container',
    `<ejs-stockchart id="chart-container" [enableSelector]='enable' [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title' [crosshair]='crosshair'>
            <e-stockchart-series [dataSource]='chartData' type='Candle' xName='date' yName='open' name='India' width=2 ></e-stockchart-series>
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
    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';