Getting started in EJ2 TypeScript Stock chart control
3 Nov 202322 minutes to read
This section explains how to create a simple Stock chart and configure its available functionalities in TypeScript using Essential JS 2 quickstart seed repository.
This application is integrated with the
webpack.config.js
configuration and uses the latest version of the webpack-cli. It requires nodev14.15.0
or higher. For more information about webpack and its features, refer to the webpack documentation.
Dependencies
Below is the list of minimum dependencies required to use the Stock Chart.
|-- @syncfusion/ej2-charts
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-pdf-export
|-- @syncfusion/ej2-file-utils
|-- @syncfusion/ej2-compression
|-- @syncfusion/ej2-svg-base
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-calendars
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-splitbuttons
Set up development environment
Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from GitHub.
git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart
After cloning the application in the ej2-quickstart
folder, run the following command line to navigate to the ej2-quickstart
folder.
cd ej2-quickstart
Add Syncfusion JavaScript packages
Syncfusion JavaScript (Essential JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.
The quickstart application is preconfigured with the dependent @syncfusion/ej2 package in the ~/package.json
file. Use the following command to install the dependent npm packages from the command prompt.
npm install
Add Stock Chart to the Project
Open the application in Visual Studio Code and add the Syncfusion JavaScript UI controls.
Add the HTML div tag with its id
attribute as element
in your ~/src/index.html
file to initialize the Stock Chart.
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Stock Chart</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" />
....
....
</head>
<body>
<!--container which is going to render the Stock Chart-->
<div id='element'>
</div>
</body>
</html>
Now import the Stock Chart component into your app.ts
to instantiate a Stock Chart and append the Stock Chart instance to the #element
[src/app/app.ts]
import { StockChart } from '@syncfusion/ej2-charts';
// initialize Stock Chart component
let stockChart: StockChart = new StockChart();
// render initialized Stock Chart
stockChart.appendTo('#element');
Now use the npm run start
command to run the application in the browser.
npm run start
Module Injection
Stock Chart component are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature module using StockChart.Inject()
method. In the current application, we are going to modify the above basic Stock Chart to visualize stock value of a company. For this application we are going to use candle series, tooltip, data label and datetime axis feature of the stock chart. Please find relevant feature module name and description as follows.
- CandleSeries - Inject this provider to use candle series.
- Tooltip - Inject this provider to use tooltip feature.
- DataLabel - Inject this provider to use data label feature.
- DateTime - Inject this provider to use DateTime feature.
Now import the above mentioned modules from Stock Chart package and inject it into the Stock Chart component using
StockChart.Inject
method.
import { StockChart, CandleSeries, DateTime, Tooltip } from '@syncfusion/ej2-charts';
StockChart.Inject(CandleSeries, DataLabel, Tooltip, DateTime);
Populate Stock Chart With Data
This section explains how to plot below JSON data to the Stock Chart.Please find the below imported datasource.
let stockchartData: any[] = [{
x: new Date( '2012-04-02' ),
open : 85.9757,
high : 90.6657,
low : 85.7685,
close : 90.5257,
volume : 660187068
},
{
x: new Date( '2012-04-09' ),
open : 89.4471,
high : 92,
low : 86.2157,
close : 86.4614,
volume : 912634864
},
{
x: new Date( '2012-04-16' ),
open : 87.1514,
high : 88.6071,
low : 81.4885,
close : 81.8543,
volume : 1221746066
},
{
x: new Date( '2012-04-23' ),
open : 81.5157,
high : 88.2857,
low : 79.2857,
close : 86.1428,
volume : 965935749
},
{
x: new Date( '2012-04-30' ),
open : 85.4,
high : 85.4857,
low : 80.7385,
close : 80.75,
volume : 615249365
},
............];
Add a series object to the chart by using series
property and then set the JSON data to dataSource
property.
Since the JSON contains DateTime data, set the valueType
for horizontal axis to DateTime. By default, the axis valueType is Numeric.
import { StockChart } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
import { DateTime,AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries ,Logarithmic } from '@syncfusion/ej2-charts';
import { SplineAreaSeries, SplineSeries } from '@syncfusion/ej2-charts';
import { AccumulationDistributionIndicator, AtrIndicator, BollingerBands, EmaIndicator, MomentumIndicator } from '@syncfusion/ej2-charts';
import { MacdIndicator, RsiIndicator, Trendlines, SmaIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-charts';
import { TmaIndicator, RangeTooltip, Tooltip, Crosshair, IStockChartEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
StockChart.Inject(DateTime,Logarithmic, AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries, SplineAreaSeries, SplineSeries );
StockChart.Inject(AccumulationDistributionIndicator, AtrIndicator, BollingerBands, EmaIndicator, MomentumIndicator);
StockChart.Inject(MacdIndicator, RsiIndicator, SmaIndicator, StochasticIndicator);
StockChart.Inject(Trendlines, TmaIndicator, RangeTooltip, Tooltip, Crosshair, Export);
let stockchart: StockChart = new StockChart({
series:[{
// dataSource for stockchart series
dataSource: chartData,
type: 'Candle'
}]
});
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>
Add Stock Chart Title
You can add a title using title
property to the Stock Chart to provide quick information to the user about the data plotted in the Chart.
import { StockChart } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
import { DateTime,AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries ,Logarithmic } from '@syncfusion/ej2-charts';
import { SplineAreaSeries, SplineSeries } from '@syncfusion/ej2-charts';
import { AccumulationDistributionIndicator, AtrIndicator, BollingerBands, EmaIndicator, MomentumIndicator } from '@syncfusion/ej2-charts';
import { MacdIndicator, RsiIndicator, Trendlines, SmaIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-charts';
import { TmaIndicator, RangeTooltip, Tooltip, Crosshair, IStockChartEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
StockChart.Inject(DateTime,Logarithmic, AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries, SplineAreaSeries, SplineSeries );
StockChart.Inject(AccumulationDistributionIndicator, AtrIndicator, BollingerBands, EmaIndicator, MomentumIndicator);
StockChart.Inject(MacdIndicator, RsiIndicator, SmaIndicator, StochasticIndicator);
StockChart.Inject(Trendlines, TmaIndicator, RangeTooltip, Tooltip, Crosshair, Export);
let stockChart: StockChart = new StockChart({
// Title for chart
title: 'Sales Analysis',
series:[{
dataSource: chartData,
name:'Sales',
type: 'Candle'
}],
});
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>
Add Crosshair
Crosshair has a vertical and horizontal line to view the value of the axis at mouse or touch position.
Crosshair lines can be enabled by using enable
property in the crosshair
. Likewise tooltip label for an axis can be enabled by using enable
property of crosshairTooltip
in the corresponding axis.
import { StockChart } from '@syncfusion/ej2-charts';
import { DateTime,AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries ,Logarithmic } from '@syncfusion/ej2-charts';
import { SplineAreaSeries, SplineSeries } from '@syncfusion/ej2-charts';
import { AccumulationDistributionIndicator, AtrIndicator, BollingerBands, EmaIndicator, MomentumIndicator } from '@syncfusion/ej2-charts';
import { MacdIndicator, RsiIndicator, Trendlines, SmaIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-charts';
import { TmaIndicator, RangeTooltip, Tooltip, Crosshair, IStockChartEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
StockChart.Inject(DateTime,Logarithmic, AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries, SplineAreaSeries, SplineSeries );
StockChart.Inject(AccumulationDistributionIndicator, AtrIndicator, BollingerBands, EmaIndicator, MomentumIndicator);
StockChart.Inject(MacdIndicator, RsiIndicator, SmaIndicator, StochasticIndicator);
StockChart.Inject(Trendlines, TmaIndicator, RangeTooltip, Tooltip, Crosshair, Export);
import { chartData } from './datasource.ts';
let stockChart: StockChart = new StockChart({
primaryXAxis: {
valueType: 'DateTime',
},
series: [
{
type: 'Candle', width: 2,
dataSource: chartData,
}
],
//crosshair for chart
crosshair: { enable: true },
title: 'Weather Condition'
});
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>
Add Trackball
Trackball is used to track a data point closest to the mouse or touch position. Trackball marker indicates the closest point and trackball tooltip displays the information about the point. To use trackball feature, we need to inject Crosshair
module and Tooltip
module using
StockChart.Inject(Crosshair, Tooltip)
.
Trackball can be enabled by setting the enable
property of the crosshair to true and
shared
property in tooltip
to true in chart.
import { StockChart } from '@syncfusion/ej2-charts';
import { DateTime,AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries ,Logarithmic } from '@syncfusion/ej2-charts';
import { SplineAreaSeries, SplineSeries } from '@syncfusion/ej2-charts';
import { AccumulationDistributionIndicator, AtrIndicator, BollingerBands, EmaIndicator, MomentumIndicator } from '@syncfusion/ej2-charts';
import { MacdIndicator, RsiIndicator, Trendlines, SmaIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-charts';
import { TmaIndicator, RangeTooltip, Tooltip, Crosshair, IStockChartEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
StockChart.Inject(DateTime,Logarithmic, AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries, SplineAreaSeries, SplineSeries );
StockChart.Inject(AccumulationDistributionIndicator, AtrIndicator, BollingerBands, EmaIndicator, MomentumIndicator);
StockChart.Inject(MacdIndicator, RsiIndicator, SmaIndicator, StochasticIndicator);
StockChart.Inject(Trendlines, TmaIndicator, RangeTooltip, Tooltip, Crosshair, Export);
import { trackData } from './datasource.ts';
let stockChart: StockChart = new StockChart({
primaryXAxis: {
valueType: 'DateTime',
},
series: [
{
dataSource: trackData, name: 'John', xName: 'x',
type: 'Line', width: 2,
yName: 'y'
},
{
dataSource: trackData, name: 'Andrew', xName: 'x',
type: 'Line', width: 2,
yName: 'y1'
},
{
dataSource: trackData, name: 'Thomas', xName: 'x',
type: 'Line', width: 2,
yName: 'y2'
},
{
dataSource: trackData, name: 'Mark', xName: 'x',
type: 'Line', width: 2,
yName: 'y3'
},
{
dataSource: trackData, name: 'William', xName: 'x',
type: 'Line', width: 2,
yName: 'y4'
}
],
// trackball for chart
tooltip: { enable: true, shared: true, format: '${series.name} : ${point.x} : ${point.y}' },
crosshair: { enable: true, lineType: 'Vertical' },
title: 'Average Sales per Person'
});
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>
You can refer to our JavaScript Stock Chart feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Stock Chart example that shows you how to present and manipulate data.