Angular Stock Chart - Visualize Stock Data Seamlessly

<div>
        <ejs-stockchart id='stockChartDefault' [chartArea]='chartArea' [primaryXAxis]='primaryXAxis' style="display:block;"
            [primaryYAxis]='primaryYAxis' [title]='title' [titleStyle]='titleStyle' [crosshair]='crosshair'
            (tooltipRender)='tooltipRender($event)' [tooltip]='tooltip'>
            <e-stockchart-series-collection>
                <e-stockchart-series [dataSource]='data' type='Candle'>
                </e-stockchart-series>
            </e-stockchart-series-collection>
        </ejs-stockchart>
    </div>

import { Component, ViewEncapsulation } from '@angular/core';
import { ITooltipRenderEventArgs, IStockChartEventArgs, ChartTheme } from '@syncfusion/ej2-angular-charts';
import { chartData } from './indicator-data';

@Component({
    selector: 'control-content',
    templateUrl: 'default.html',
    encapsulation: ViewEncapsulation.None
})
export class DefaultComponent {

    public data: Object[] = chartData;

    public primaryXAxis: Object = { majorGridLines: { color: 'transparent' }, crosshairTooltip: { enable: true } };

    public primaryYAxis: Object = {
        lineStyle: { color: 'transparent' },
        majorTickLines: { color: 'transparent', width: 0 },
    };
    public crosshair: Object = {
        enable: true
    };
    public tooltipRender(args: ITooltipRenderEventArgs): void {
        if (args.text.split('<br/>')[4]) {
        let target: number = parseInt(args.text.split('<br/>')[4].split('<b>')[1].split('</b>')[0], 10);
        let value: string = (target / 100000000).toFixed(1) + 'B';
        args.text = args.text.replace(args.text.split('<br/>')[4].split('<b>')[1].split('</b>')[0], value);
        }
    };
    public title: string = 'AAPL Stock Price';
    public titleStyle: object = { color: 'black' };

    public tooltip: object = { enable: true };
    public chartArea: Object = {
        border: {
            width: 0
        }
    };
    public enable: boolean = true;
}