A technical indicator is a mathematical calculation based on historic price, volume or open interest information that aims to forecast financial market direction.
StockChart supports 10 types of technical indicators namely Accumulation Distribution
, ATR
, EMA
,SMA
,TMA
,Momentum
,MACD
,RSI
,Stochastic
,Bollinger Band
. By using indicator dropdown box you can add an remove the required indicators types.
Accumulation Distribution combines price and volume to show how money may be flowing into or out of stock.
To render a Accumulation Distribution Indicator,
use indicator type
as AccumulationDistribution
and inject
AccumulationDistributionIndicator
module using <Inject services={[AccumulationDistributionIndicator]}>
.
To calculate the signal line volume
field is additionally added with dataSource
.
ATR measures the stock volatility by comparing the current value with the previous value.
To render a Average True Range (ATR) Indicator,
use indicator type
as Atr
and inject AtrIndicator
module using <Inject services={[AtrIndicator]}>
.
Moving average Indicators are used to define the direction of the trend. To render a EMA Indicator,
use indicator type
as Ema
and
inject EmaIndicator
module using <Inject services={[EmaIndicator}]>
.
Momentum shows the speed at which the price of the stock is changing. To render a Momentum indicator, use indicator
type
as Momentum
and inject MomentumIndicator
module using
<Inject services={[MomentumIndicator]}>
method. Momentum indicator will be represented by two lines (upperLine,
signalLine).In momentum indicator the upperBand value is always renders at the value 100.
MACD is based on the difference between two EMA’s. To render a MACD Indicator, use indicator type
as
Macd
and inject MacdIndicator
module using <Inject services={[MacdIndicator]}>
.MACD indicator will be represented
by MACD line,signal line, MACD histogram. MACD histogram is used to differentiate MACD line and signal line.
RSI shows how strongly a stock is moving in its current direction. To render a RSI Indicator, use indicator type
as
Rsi
and inject RsiIndicator
module using <Inject services={[Rsindicator]}>
.RSI indicator will be represented
by three lines (upperBand, lowerBand, signalLine). The upperBand and lowerBand values are customized by
overBought
and overSold
properties of indicator and the signalLine is calculated by RSI formula.
Moving average Indicators are used to define the direction of the trend. To render a SMA Indicator, use indicator type
as
Sma
and inject SmaIndicator
module using <Inject services={[SmaIndicator]}>
.
It shows how a stock is, when compared to previous state. To render a Stochastic indicator, use indicator type
as Stochastic
and inject StochasticIndicator
module using Chart.Inject(StochasticIndicator)
method.
stochastic indicator will be represented by four lines (upperLine, lowerLine, periodLine, signalLine).
In stochastic indicator the upperBand value and lowerBand value is customized by overBought
and overSold
properties of indicators and the periodLine and signalLine is render based on stochastic formula.
Moving average Indicators are used to define the direction of the trend. To render a TMA Indicator, use indicator type
as
Tma
and inject TmaIndicator
module using <Inject services={[TmaIndicator]}>
.
A StockChart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices.
To render a Bollinger Band, use indicator type
as BollingerBand
and inject BollingerBands
module using <Inject services={[BollingerBands]}>
method.
Bollinger band will be represented by three lines (upperLine, lowerLine, signalLine).
The default values of the Bollinger Band period
is 14 and standardDeviations
is 2.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries, StockChartIndicatorsDirective, StockChartIndicatorDirective, LineSeries, SplineSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
import { BollingerBands } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
function App() {
const upperline = { color: '#ffb735', width: 1 };
const lowerline = { color: '#f2ec2f', width: 1 };
return (<StockChartComponent id='stockchart' primaryXAxis={{
majorGridLines: { color: 'transparent' }, crosshairTooltip: { enable: true }
}} primaryYAxis={{
lineStyle: { color: 'transparent' },
majorTickLines: { color: 'transparent', width: 0 }
}} crosshair={{ enable: true }} tooltip={{ enable: true }} seriesType={[]} exportType={[]} trendlineType={[]} height='350'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries, BollingerBands,
LineSeries, SplineSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='Apple Inc' bearFillColor='#00226C' bullFillColor="#0450C2" fill='blue'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
<StockChartIndicatorsDirective>
<StockChartIndicatorDirective type='BollingerBands' field='Close' seriesName='Apple Inc' fill='#606eff' xName='date' high='high' low='low' open='open' close='close' period={10} upperLine={upperline} lowerLine={lowerline}>
</StockChartIndicatorDirective>
</StockChartIndicatorsDirective>
</StockChartComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject,
DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries, Trendlines, StockChartIndicatorsDirective, StockChartIndicatorDirective, LineSeries, SplineSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries
} from '@syncfusion/ej2-react-charts';
import { BollingerBands } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
function App() {
const upperline: Object = { color: '#ffb735', width: 1 };
const lowerline: Object = { color: '#f2ec2f', width: 1 };
return (
<StockChartComponent id='stockchart'
primaryXAxis={{
majorGridLines: { color: 'transparent' }, crosshairTooltip: { enable: true }
}}
primaryYAxis={{
lineStyle: { color: 'transparent' },
majorTickLines: { color: 'transparent', width: 0 }
}}
crosshair={{ enable: true }}
tooltip={{ enable: true }}
seriesType={[]}
exportType={[]}
trendlineType={[]}
height='350'
>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries, BollingerBands,
LineSeries, SplineSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries]} />
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='Apple Inc'
bearFillColor='#00226C' bullFillColor="#0450C2" fill='blue'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
<StockChartIndicatorsDirective>
<StockChartIndicatorDirective type='BollingerBands' field='Close' seriesName='Apple Inc' fill='#606eff' xName='date' high='high' low='low' open='open' close='close' period={10} upperLine={upperline} lowerLine={lowerline}>
</StockChartIndicatorDirective>
</StockChartIndicatorsDirective >
</StockChartComponent>
)
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));