Series types in EJ2 TypeScript Stock chart control
8 May 20232 minutes to read
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 LineSeries
module using StockChart.Inject(LineSeries)
method.
Spline
To render a spline series, use series type
as Spline
and inject SplineSeries
module using StockChart.Inject(SplineSeries)
method.
Hilo
To render a hilo series, use series type
as Hilo
and inject HiloSeries
module using StockChart.Inject(HiloSeries)
method.
HiloOpenClose
To render a hiloOpenClose series, use series type
as HiloOpenClose
and inject HiloOpenCloseSeries
module using StockChart.Inject(HiloOpenCloseSeries)
method.
HollowCandle
To render a hollowcandle series, use series type
as Candle
and set enableSolidCandle
as false. Now inject CandleSeries
module using StockChart.Inject(CandleSeries)
method.
Candle
To render a candle series, use series type
as Candle
and inject CandleSeries
module using StockChart.Inject(CandleSeries)
method.
import { StockChart } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
import { DateTime, AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries, SplineSeries } from '@syncfusion/ej2-charts';
import { RangeTooltip, Tooltip, Crosshair }
from '@syncfusion/ej2-charts';
StockChart.Inject(DateTime, AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries, SplineSeries);
StockChart.Inject( RangeTooltip, Tooltip, Crosshair);
let stockChart: StockChart = new StockChart({
series:[{
dataSource: chartData,
type: 'Candle'
}],
indicatorType: [];
trendlineType: [];
exportType: [];
});
stockChart.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="./index.css" rel="stylesheet" />
<link href="http://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>