Search results

StockChart Series Types

Essential JS 2 StockChart supports 6 major types of series namely Line, Spline, Hilo, HiloOpenClose, Hollow Candle and Candle . By using the series dropdown button you can navigate between the above listed series types.

Line

To render a line series, use series type as Line and inject LineSeriesService into the @NgModule.providers.

Spline

To render a spline series, use series type as Spline and inject SplineSeriesService into the @NgModule.providers.

Hilo

To render a hilo series, use series type as Hilo and inject HiloSeries into the @NgModule.providers.

HiloOpenClose

To render a hiloOpenClose series, use series type as HiloOpenClose and inject HiloOpenCloseSeries into the @NgModule.providers..

HollowCandle

To render a hollowcandle series, use series type as Candle and set enableSolidCandle as false. Now inject CandleSeries into the @NgModule.providers.

Candle

To render a candle series, use series type as Candle and inject CandleSeries into the @NgModule.providers.

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'>
        <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 chartData: Object[];
    public title: string;
    ngOnInit(): void {
        this.chartData = chartData;
        this.title = 'Efficiency of oil-fired power production';
    }

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

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