Stock Events visualizes stock events in stock chart. ‘SplineSeries’ is used to represent selected data value. You can customize the specific data value using stockEvents
event.
import { StockChart } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
import { DateTime, AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries, 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, AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries, 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({
chartArea: { border: { width: 0 } },
primaryXAxis: { valueType: 'DateTime', majorGridLines: { color: 'transparent' }, crosshairTooltip: { enable: true } },
primaryYAxis: {
lineStyle: { color: 'transparent' },
majorTickLines: { color: 'transparent' },
crosshairTooltip: { enable: true }
},
series: [
{
dataSource: chartData, xName: 'date', yName: 'high', type: 'Spline'
}
],
stockEvents: [
{ date: new Date(2012, 3, 1), text: 'Q2', description: '2012 Quarter2 starts', type: 'Flag', background: '#6c6d6d', border: { color: '#6c6d6d' } },
{ date: new Date(2012, 3, 20), text: 'Open', description: 'Markets opened', textStyle: { color: 'white' },
background: '#f48a21', border: { color: '#f48a21' } },
{ date: new Date(2012, 6, 1), text: 'Q3', description: '2013 Quarter3 starts', type: 'Flag',
textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } },
{ date: new Date(2012, 9, 1), text: 'Q4', description: '2013 Quarter4 starts', type: 'Flag',
textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } },
{ date: new Date(2012, 7, 30), text: 'G', description: 'Google stocks bought',
textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' } },
{ date: new Date(2012, 10, 1), text: 'Y', description: 'Yahoo stocks sold', type: 'Square',
textStyle: { color: 'white' }, background: '#841391', border: { color: '#841391' } },
{ date: new Date(2012, 12, 0), text: 'Y2', description: 'Year 2013', type: 'Pin', showOnSeries: false,
textStyle: { color: 'white' }, background: '#6322e0', border: { color: '#6322e0' } },
{ date: new Date(2013, 3, 1), text: 'Q2', description: '2013 Quarter2 starts', type: 'Flag',
textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } },
{ date: new Date(2013, 3, 20), text: 'Q2', description: 'Surge in Stocks', type: 'ArrowUp',
textStyle: { color: 'white' }, background: '#3ab0f9', border: { color: '#3ab0f9' } },
{ date: new Date(2013, 6, 1), text: 'Q3', description: '2013 Quarter3 starts', type: 'Flag',
textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } },
{ date: new Date(2013, 9, 1), text: 'Q4', description: '2013 Quarter4 starts', type: 'Flag',
textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } },
{ date: new Date(2013, 12, 0), text: 'Y3', description: 'Year 2014', type: 'Pin', showOnSeries: false,
textStyle: { color: 'white' }, background: '#6322e0', border: { color: '#6322e0' } },
{ date: new Date(2014, 3, 1), text: 'Q2', description: '2014 Quarter2 starts', type: 'ArrowDown',
textStyle: { color: 'white' }, background: '#3ab0f9', border: { color: '#3ab0f9' } },
{ date: new Date(2014, 6, 1), text: 'Q3', description: '2014 Quarter3 starts',
textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' } },
{ date: new Date(2014, 9, 1), text: 'Q4', description: '2014 Quarter4 starts', type: 'Flag',
textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' } },
{ date: new Date(2014, 12, 0), text: 'Y4', description: 'Year 2015', type: 'Pin', showOnSeries: false,
textStyle: { color: 'white' }, background: '#6322e0', border: { color: '#6322e0' } },
{ date: new Date(2014, 2, 2), text: 'End', description: 'Markets closed', type: 'ArrowDown',
textStyle: { color: 'white' }, background: '#3ab0f9', border: { color: '#3ab0f9' } },
{ date: new Date('2015-01-07'), text: 'A', description: 'This is event description',
textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' } },
{ date: new Date(2015, 1, 2), text: 'Q1', description: 'Add longer text',
textStyle: { color: 'white' }, background: '#dd3c9f', border: { color: '#dd3c9f' }, type: 'Text' },
{ date: new Date(2015, 2, 12), text: 'Close', description: 'Markets closed',
textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' } }
],
seriesType : [],
indicatorType : [],
trendlineType: [],
title: 'AAPL Stock Price',
crosshair: { enable: true },
});
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/20.1.55/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Stock Events for individual series
By default, stock events will be showed for all series. Now, you can set the stock events for particular series using seriesIndexes
property.
import { StockChart } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
import { DateTime, AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries, 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, AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries, 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({
chartArea: { border: { width: 0 } },
primaryXAxis: { valueType: 'DateTime', majorGridLines: { color: 'transparent' }, crosshairTooltip: { enable: true } },
primaryYAxis: {
lineStyle: { color: 'transparent' },
majorTickLines: { color: 'transparent' },
crosshairTooltip: { enable: true }
},
series: [
{
dataSource: chartData, xName: 'date', yName: 'high', type: 'Spline'
},
{
dataSource: chartData, xName: 'date', yName: 'low', type: 'Spline'
},
{
dataSource: chartData, xName: 'date', yName: 'open', type: 'Spline'
}
],
stockEvents: [
{ date: new Date(2012, 3, 1), text: 'Q2', description: '2012 Quarter2 starts', type: 'Flag', background: '#6c6d6d', border: { color: '#6c6d6d' }, seriesIndexes: [0] },
{ date: new Date(2012, 3, 20), text: 'Open', description: 'Markets opened', textStyle: { color: 'white' },
background: '#f48a21', border: { color: '#f48a21' }, seriesIndexes: [0] },
{ date: new Date(2012, 6, 1), text: 'Q3', description: '2013 Quarter3 starts', type: 'Flag',
textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }, seriesIndexes: [0] },
{ date: new Date(2012, 9, 1), text: 'Q4', description: '2013 Quarter4 starts', type: 'Flag',
textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }, seriesIndexes: [0] },
{ date: new Date(2012, 7, 30), text: 'G', description: 'Google stocks bought',
textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' }, seriesIndexes: [0] },
{ date: new Date(2012, 10, 1), text: 'Y', description: 'Yahoo stocks sold', type: 'Square',
textStyle: { color: 'white' }, background: '#841391', border: { color: '#841391' }, seriesIndexes: [0] },
{ date: new Date(2012, 12, 0), text: 'Y2', description: 'Year 2013', type: 'Pin', showOnSeries: false,
textStyle: { color: 'white' }, background: '#6322e0', border: { color: '#6322e0' }, seriesIndexes: [0] },
{ date: new Date(2013, 3, 1), text: 'Q2', description: '2013 Quarter2 starts', type: 'Flag',
textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }, seriesIndexes: [0] },
{ date: new Date(2013, 3, 20), text: 'Q2', description: 'Surge in Stocks', type: 'ArrowUp',
textStyle: { color: 'white' }, background: '#3ab0f9', border: { color: '#3ab0f9' }, seriesIndexes: [1] },
{ date: new Date(2013, 6, 1), text: 'Q3', description: '2013 Quarter3 starts', type: 'Flag',
textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }, seriesIndexes: [1] },
{ date: new Date(2013, 9, 1), text: 'Q4', description: '2013 Quarter4 starts', type: 'Flag',
textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }, seriesIndexes: [1] },
{ date: new Date(2013, 12, 0), text: 'Y3', description: 'Year 2014', type: 'Pin', showOnSeries: false,
textStyle: { color: 'white' }, background: '#6322e0', border: { color: '#6322e0' }, seriesIndexes: [1] },
{ date: new Date(2014, 3, 1), text: 'Q2', description: '2014 Quarter2 starts', type: 'ArrowDown',
textStyle: { color: 'white' }, background: '#3ab0f9', border: { color: '#3ab0f9' }, seriesIndexes: [1] },
{ date: new Date(2014, 6, 1), text: 'Q3', description: '2014 Quarter3 starts',
textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' }, seriesIndexes: [2] },
{ date: new Date(2014, 9, 1), text: 'Q4', description: '2014 Quarter4 starts', type: 'Flag',
textStyle: { color: 'white' }, background: '#6c6d6d', border: { color: '#6c6d6d' }, seriesIndexes: [2] },
{ date: new Date(2014, 12, 0), text: 'Y4', description: 'Year 2015', type: 'Pin', showOnSeries: false,
textStyle: { color: 'white' }, background: '#6322e0', border: { color: '#6322e0' }, seriesIndexes: [2] },
{ date: new Date(2014, 2, 2), text: 'End', description: 'Markets closed', type: 'ArrowDown',
textStyle: { color: 'white' }, background: '#3ab0f9', border: { color: '#3ab0f9' }, seriesIndexes: [2] },
{ date: new Date('2015-01-07'), text: 'A', description: 'This is event description',
textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' }, seriesIndexes: [2] },
{ date: new Date(2015, 1, 2), text: 'Q1', description: 'Add longer text',
textStyle: { color: 'white' }, background: '#dd3c9f', border: { color: '#dd3c9f' }, type: 'Text', seriesIndexes: [2] },
{ date: new Date(2015, 2, 12), text: 'Close', description: 'Markets closed',
textStyle: { color: 'white' }, background: '#f48a21', border: { color: '#f48a21' }, seriesIndexes: [2] }
],
seriesType : [],
indicatorType : [],
trendlineType: [],
title: 'AAPL Stock Price',
crosshair: { enable: true },
});
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/20.1.55/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>