Series types in Angular Stock chart component
27 Apr 20243 minutes to read
Essential JS 2 StockChart supports 7 major types of series namely Line
, Spline
, Area
, 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
.
Area
To render a area series, use series type
as Area
and inject AreaSeriesService
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
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts'
import { LineSeriesService, SplineSeriesService, StepLineSeriesService, CategoryService, ParetoSeriesService, ColumnSeriesService,
SplineAreaSeriesService, MultiColoredLineSeriesService, TooltipService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
ChartModule, StockChartAllModule, ChartAllModule
],
providers: [ LineSeriesService, SplineSeriesService, StepLineSeriesService, CategoryService, SplineAreaSeriesService, ParetoSeriesService, ColumnSeriesService,
MultiColoredLineSeriesService, TooltipService ],
standalone: true,
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;
primaryXAxis: any;
primaryYAxis: any;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'Efficiency of oil-fired power production';
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));