Stock Events in Angular Stock Chart component

import { Component, OnInit } from '@angular/core';
import { chartData } from 'datasource.ts';
import { IStockChartEventArgs, ChartTheme, ITooltipRenderEventArgs } from '@syncfusion/ej2-angular-charts';
@Component({
    selector: 'app-container',
    template:
    `<ejs-stockchart id='stockChartEvents' [enablePeriodSelector]='enable' [title]='title' [titleStyle]='titleStyle'
            [chartArea]='chartArea' [primaryXAxis]='primaryXAxis' style="display:block;" [tooltip]='tooltip'
            [crosshair]='crosshair' [primaryYAxis]='primaryYAxis' (tooltipRender)='tooltipRender($event)' [seriesType]='seriesType'
            [indicatorType]='indicatorType' (load)='load($event)'>
            <e-stockchart-series-collection>
                <e-stockchart-series [dataSource]='data1' type='Spline' xName='date' yName='high' close='close'>
                </e-stockchart-series>
            </e-stockchart-series-collection>
            <e-stockchart-stockevents>
                <e-stockchart-stockevent [date]="date1" text="Q2" description="2012 Quarter2"
                    type="Flag"  background='#6c6d6d' [border]="border1"></e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date2" text="Open" description="Markets opened"
                    [textStyle]="textStyle" background="#f48a21" [border]="border2"></e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date3" text="Q3" description="2013 Quarter3"
                    type="Flag" [textStyle]="textStyle" background="#6c6d6d" [border]="border3">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date4" text="Q4" description="2013 Quarter4"
                    type="Flag" [textStyle]="textStyle" background="#6c6d6d" [border]="border3">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date5" text="G" description="Google Stock"
                    [textStyle]="textStyle" background="#f48a21" [border]="border2"></e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date6" text="Y" description="Yahoo Stock"
                    type="Square" [textStyle]="textStyle" background="#841391" [border]="border5">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date7" text="Y2" description="Year 2013" type="Pin"
                    [showOnSeries]="onSeries" [textStyle]="textStyle" background="#6322e0" [border]="border6">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date8" text="Q2" description="2013 Quarter2"
                    type="Flag" [textStyle]="textStyle" background="#6c6d6d" [border]="border3">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date9" text="Q2" description="Surge in Stocks"
                    type="ArrowUp" [textStyle]="textStyle" background="#3ab0f9" [border]="border4">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date10" text="Q3" description="2013 Quarter3"
                    type="Flag" [textStyle]="textStyle" background="#f48a21" [border]="border2">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date11" text="Q4" description="2013 Quarter4"
                    type="Flag" [textStyle]="textStyle" background="#6c6d6d" [border]="border3">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date12" text="Y3" description="Year 2014" type="Pin"
                    [showOnSeries]="onSeries" [textStyle]="textStyle" background="#6322e0" [border]="border6">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date13" text="Q2" description="2014 Quarter2"
                    type="Flag" [textStyle]="textStyle" background="#6c6d6d" [border]="border3">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date14" text="Q3" description="2014 Quarter3"
                    [textStyle]="textStyle" background="#f48a21" [border]="border2"></e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date15" text="Q4" description="2014 Quarter4"
                    type="Flag" [textStyle]="textStyle" background="#6c6d6d" [border]="border3">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date16" text="Y4" description="Year 2015" type="Pin"
                    [showOnSeries]="onSeries" [textStyle]="textStyle" background="#6322e0" [border]="border6">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date17" text="End" description="Markets closed"
                    type="ArrowDown" [textStyle]="textStyle" background="#3ab0f9" [border]="border4">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date18" text="A" description="Amazon Stock"
                    [textStyle]="textStyle" background="#f48a21" [border]="border2"></e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date19" text="Q1" description="AAPL Stock"
                    [textStyle]="textStyle" background="#dd3c9f" [border]="border7" type="Text">
                </e-stockchart-stockevent>
                <e-stockchart-stockevent [date]="date20" text="Close" description="Markets closed"
                    [textStyle]="textStyle" background="#f48a21" [border]="border2"></e-stockchart-stockevent>
            </e-stockchart-stockevents>
        </ejs-stockchart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis: Object;
    public data1: Object[];
    public title: string;
    public primaryYAxis: Object;
    public marker: Object;
    public tooltip: Object;
    public date1:  Date = new Date(2012, 3, 1);
    public date2:  Date = new Date(2012, 3, 20);
    public date3:  Date = new Date(2012, 6, 1);
    public date4:  Date = new Date(2012, 9, 1);
    public date5:  Date = new Date(2012, 7, 30);
    public date6:  Date = new Date(2012, 10, 1);
    public date7:  Date = new Date(2012, 12, 0);
    public date8:  Date = new Date(2013, 3, 1);
    public date9:  Date = new Date(2013, 3, 20);
    public date10: Date =  new Date(2013, 6, 1);
    public date11: Date =  new Date(2013, 9, 1);
    public date12: Date =  new Date(2013, 12, 0);
    public date13: Date =  new Date(2014, 3, 1);
    public date14: Date =  new Date(2014, 6, 1);
    public date15: Date =  new Date(2014, 9, 1);
    public date16: Date =  new Date(2014, 12, 0);
    public date17: Date =  new Date(2014, 2, 2);
    public date18: Date =  new Date(2015, 1, 7);
    public date19: Date =  new Date(2015, 1, 2);
    public date20: Date =  new Date(2015, 2, 12);
    public border1: object = { color: '#6c6d6d' };
    public textStyle: object = { color: 'white' };
    public border2: object = { color: '#f48a21' };
    public border3: object = { color: '#6c6d6d' };
    public border4: object = { color: '#3ab0f9' };
    public border5: object = { color: '#841391' };
    public border6: object = { color: '#6322e0' };
    public border7: object = { color: '#dd3c9f' };
    ngOnInit(): void {
        this.data1 = chartData;
        this.primaryXAxis = {
            valueType: 'DateTime',
        };
        this.tooltip = { enable: true };
        this.marker = { visible: true, width: 10, height: 10 };
        this.title = 'Unemployment Rates 1975-2010';

}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, StockChartAllModule, ChartAllModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import { LineSeriesService, SplineSeriesService, RangeTooltipService, StepLineSeriesService, CategoryService, ParetoSeriesService, ColumnSeriesService,
       SplineAreaSeriesService, MultiColoredLineSeriesService, TooltipService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, StockChartAllModule, ChartAllModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ LineSeriesService, SplineSeriesService, RangeTooltipService, StepLineSeriesService, CategoryService, SplineAreaSeriesService, ParetoSeriesService, ColumnSeriesService,
               MultiColoredLineSeriesService, TooltipService ]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);