Technical Indicators
15 Mar 202224 minutes to read
A technical indicator is a mathematical calculation based on historic price, volume or open interest information that aims to forecast financial market direction.
Chart supports 10 types of technical indicators.
Accumulation Distribution
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. To calculate the signal line volume field is additionally added with dataSource.
<ejs-chart id="ADIContainer" title="AAPL - 2012-2017" load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-chart-tooltipsettings enable="true" shared="true"></e-chart-tooltipsettings>
<e-chart-legendsettings visible="false"></e-chart-legendsettings>
<e-chart-axes>
<e-chart-axis name="secondary"
opposedPosition=true rowIndex=0 interval=6000000000
minimum=-7000000000 maximum=5000000000
title="Accumulation Distribution">
</e-chart-axis>
</e-chart-axes>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.AccumulationDistribution" field="Close" seriesName="Apple Inc" yAxisName="secondary" fill="#6063ff"
period=3>
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/ad/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Average True Range (ATR)
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.
<ejs-chart id="container" title="AAPL - 2012-2017" load="window.onChartLoad">
<e-chart-primaryxaxis valueType= "DateTime" intervalType= "Months" majorGridLines="line"
zoomFactor=0.2 zoomPosition=0.6 crosshairTooltip="crosshairTooltip"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title = "Price" labelFormat = "${value}" minimum=50 majorTickLines="line"
maximum=170 plotOffset=25 interval=30 rowIndex=1 opposedPosition=true
lineStyle = "line"></e-chart-primaryyaxis>
<e-chart-tooltipsettings enable="true" shared="true">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="false">
</e-chart-legendsettings>
<e-chart-chartarea></e-chart-chartarea>
<e-chart-border width="0"></e-chart-border>
<e-chart-zoomsettings enablePinchZooming="true" enableSelectionZooming="true" mode="X"></e-chart-zoomsettings>
<e-chart-crosshairsettings enable=true lineType="Vertical"></e-chart-crosshairsettings>
<e-chart-axes>
<e-chart-axis name="secondary"
opposedPosition=true rowIndex=0 interval=6000000000
lineStyle="line" minimum=-7000000000 maximum=5000000000
majorTickLines="line" title="Accumulation Distribution">
</e-chart-axis>
</e-chart-axes>
<e-chart-rows>
<e-chart-row height="40%"></e-chart-row>
<e-chart-row height="60%"></e-chart-row>
</e-chart-rows>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc" bearFillColor="#2ecd71" bullFillColor="#e74c3d"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Atr" field="Close" seriesName="Apple Inc" yAxisName="secondary" fill="#6063ff"
period=3>
</e-indicator>
</e-indicators>
<e-chart-chartarea border="border"></e-chart-chartarea>
</ejs-chart>
<script src="chart/technical-indicators/ad/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Bollinger Band
A chart 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. Bollinger band will be represented by three lines (upperLine, lowerLine, signalLine). Bollinger Band default values of the period is 14 and standardDeviations is 2.
<ejs-chart id="container" title="AAPL - 2012-2017 load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.BollingerBands" field="Close" seriesName="Apple Inc" yAxisName="secondary" fill="#6063ff"
period=3>
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/bollinger/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Customization of BollingerBand
The stroke, stroke-width, and color of upperLine can be customized by using upperLine and the lowerLine can be customized by using lowerLine properties of indicator.
<ejs-chart id="container"enableAnimation="true">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime" intervalType="@Syncfusion.EJ2.Charts.IntervalType.Months">
<e-majorgridlines width="0"></e-majorgridlines>
<e-crosshairtooltip enable="true"></e-crosshairtooltip>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Price" minimum="0" maximum="180" interval="30" labelFormat="${value}">
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-chart-tooltipsettings enable="true" shared="true"></e-chart-tooltipsettings>
<e-chart-crosshairsettings enable="true" lineType="@Syncfusion.EJ2.Charts.LineType.Vertical"></e-chart-crosshairsettings>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle" bullFillColor="#e74c3d" bearFillColor="#2ecd71" name="Apple Inc"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.BollingerBands" field="Close" seriesName="Apple Inc" fill="#606eff"
period=14>
<e-indicator-animation enable="true"></e-indicator-animation>
<e-technicalindicator-lowerline color="#f2ec2f" width="1"></e-technicalindicator-lowerline>
<e-technicalindicator-upperline color="#ffb735" width="1"></e-technicalindicator-upperline>
</e-indicator>
</e-indicators>
</ejs-chart>public ActionResult Index()
{
List<Data> chartData = new List<Data>
{
new Data { x= new DateTime(2012,04,02), open= 85.9757, high= 90.6657, low= 85.7685, close= 90.5257, volume= 660187068 },
new Data { x= new DateTime(2012,04,09), open= 89.4471, h igh= 92, low= 86.2157, close= 86.4614, volume= 912634864 },
new Data { x= new DateTime(2012,04,16), open= 87.1514, high= 88.6071, low= 81.4885, close= 81.8543, volume= 1221746066 },
new Data { x= new DateTime(2012,04,23), open= 81.5157, high= 88.2857, low= 79.2857, close= 86.1428, volume= 965935749 },
new Data { x= new DateTime(2012,04,30), open= 85.4, high= 85.4857, low= 80.7385, close= 80.75, volume= 615249365 },
new Data { x= new DateTime(2012,05,07), open= 80.2143, high= 82.2685, low= 79.8185, close= 80.9585, volume= 541742692 },
new Data { x= new DateTime(2012,05,14), open= 80.3671, high= 81.0728, low= 74.5971, close= 75.7685, volume= 708126233 },
new Data { x= new DateTime(2012,05,21), open= 76.3571, high= 82.3571, low= 76.2928, close= 80.3271, volume= 682076215 },
new Data { x= new DateTime(2012,05,28), open= 81.5571, high= 83.0714, low= 80.0743, close= 80.1414, volume= 480059584 },
new Data { x= new DateTime(2012,06,04), open= 80.2143, high= 82.9405, low= 78.3571, close= 82.9028, volume= 517577005 },
new Data { x= new DateTime(2012,06,11), open= 83.96, high= 84.0714, low= 80.9571, close= 82.0185, volume= 499693120 },
new Data { x= new DateTime(2012,06,18), open= 81.5657, high= 84.2857, low= 81.4814, close= 83.1571, volume= 442172142 },
new Data { x= new DateTime(2012,06,25), open= 82.4714, high= 83.4285, low= 80.8014, close= 83.4285, volume= 371529102 },
new Data { x= new DateTime(2012,07,02), open= 83.5328, high= 87.7628, low= 83.3714, close= 86.5543, volume= 385906790 },
new Data { x= new DateTime(2012,07,09), open= 86.4714, high= 88.5528, low= 84.6685, close= 86.4243, volume= 524235196 },
new Data { x= new DateTime(2012,07,16), open= 86.4457, high= 87.9071, low= 86.1643, close= 86.3285, volume= 419537217 },
new Data { x= new DateTime(2012,07,23), open= 84.9143, high= 87.0971, low= 81.4285, close= 83.5943, volume= 680773023 },
new Data { x= new DateTime(2012,07,30), open= 84.4171, high= 88.2828, low= 83.9743, close= 87.9571, volume= 475109323 },
new Data { x= new DateTime(2012,08,06), open= 88.1843, high= 89.2857, low= 87.8943, close= 88.8143, volume= 312826308 },
new Data { x= new DateTime(2012,08,13), open= 89.0557, high= 92.5985, low= 89.0357, close= 92.5871, volume= 392867193 },
new Data { x= new DateTime(2012,08,20), open= 92.8585, high= 96.4114, low= 92.5871, close= 94.746, volume= 708614692 },
new Data { x= new DateTime(2012,08,27), open= 97.1414, high= 97.2671, low= 93.8928, close= 95.0343, volume= 383807217 },
new Data { x= new DateTime(2012,09,03), open= 95.1085, high= 97.4971, low= 94.9285, close= 97.2057, volume= 355722047 },
new Data { x= new DateTime(2012,09,10), open= 97.2071, high= 99.5685, low= 93.7143, close= 98.7543, volume= 724042207 },
new Data { x= new DateTime(2012,09,17), open= 99.9071, high= 100.7243, low= 99.0885, close= 100.0135, volume= 500166040 },
new Data { x= new DateTime(2012,09,24), open= 98.1228, high= 99.3028, low= 94.3357, close= 95.3007, volume= 714507994 },
new Data { x= new DateTime(2012,10,01), open= 95.88, high= 96.6785, low= 92.95, close= 93.2271, volume= 638543622 },
new Data { x= new DateTime(2012,10,08), open= 92.4114, high= 92.5085, low= 89.0785, close= 89.9591, volume= 747127724 },
new Data { x= new DateTime(2012,10,15), open= 90.3357, high= 93.2557, low= 87.0885, close= 87.12, volume= 646996264 },
new Data { x= new DateTime(2012,10,22), open= 87.4885, high= 90.7685, low= 84.4285, close= 86.2857, volume= 866040680 },
new Data { x= new DateTime(2012,10,29), open= 84.9828, high= 86.1428, low= 82.1071, close= 82.4, volume= 367371310 },
new Data { x= new DateTime(2012,11,05), open= 83.3593, high= 84.3914, low= 76.2457, close= 78.1514, volume= 919719846 },
new Data { x= new DateTime(2012,11,12), open= 79.1643, high= 79.2143, low= 72.25, close= 75.3825, volume= 894382149 },
new Data { x= new DateTime(2012,11,19), open= 77.2443, high= 81.7143, low= 77.1257, close= 81.6428, volume= 527416747 },
new Data { x= new DateTime(2012,11,26), open= 82.2714, high= 84.8928, low= 81.7514, close= 83.6114, volume= 646467974 },
new Data { x= new DateTime(2012,12,03), open= 84.8071, high= 84.9414, low= 74.09, close= 76.1785, volume= 980096264 },
new Data { x= new DateTime(2012,12,10), open= 75, high= 78.5085, low= 72.2257, close= 72.8277, volume= 835016110 },
new Data { x= new DateTime(2012,12,17), open= 72.7043, high= 76.4143, low= 71.6043, close= 74.19, volume= 726150329 },
new Data { x= new DateTime(2012,12,24), open= 74.3357, high= 74.8928, low= 72.0943, close= 72.7984, volume= 321104733 },
new Data { x= new DateTime(2012,12,31), open= 72.9328, high= 79.2857, low= 72.7143, close= 75.2857, volume= 540854882 },
new Data { x= new DateTime(2013,01,07), open= 74.5714, high= 75.9843, low= 73.6, close= 74.3285, volume= 574594262 },
new Data { x= new DateTime(2013,01,14), open= 71.8114, high= 72.9643, low= 69.0543, close= 71.4285, volume= 803105621 },
new Data { x= new DateTime(2013,01,21), open= 72.08, high= 73.57, low= 62.1428, close= 62.84, volume= 971912560 },
new Data { x= new DateTime(2013,01,28), open= 62.5464, high= 66.0857, low= 62.2657, close= 64.8028, volume= 656549587 },
new Data { x= new DateTime(2013,02,04), open= 64.8443, high= 68.4014, low= 63.1428, close= 67.8543, volume= 743778993 },
};
ViewBag.dataSource = chartData;
return View();
}
public class Data
{
public DateTime x;
public double open;
public double high;
public double low;
public double close;
public double volume;
}Exponential Moving Average (EMA)
Moving average Indicators are used to define the direction of the trend. To render a EMA Indicator, use indicator type as Ema.
<ejs-chart id="ADIContainer" title="AAPL - 2012-2017" load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-chart-tooltipsettings enable="true" shared="true">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="false">
</e-chart-legendsettings>
<e-chart-axes>
<e-chart-axis name="secondary"
opposedPosition=true rowIndex=0
minimum=30 maximum=110
title="Accumulation Distribution">
</e-chart-axis>
</e-chart-axes>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Ema" field="Close" seriesName="Apple Inc" fill="#6063ff"
period=3>
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/ema/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Momentum
Momentum shows the speed at which the price of the stock is changing. To render a Momentum indicator, use indicator type as Momentum. Momentum indicator will be represented by two lines (upperLine, signalLine). In momentum indicator the upperBand value is always render at the value 100.
<ejs-chart id="container" title="AAPL - 2012-2017" load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-chart-tooltipsettings enable="true" shared="true">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="false">
</e-chart-legendsettings>
<e-chart-axes>
<e-chart-axis name="secondary"
opposedPosition=true rowIndex=0
minimum=30 maximum=110>
</e-chart-axis>
</e-chart-axes>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Momentum" field="Close" seriesName="Apple Inc" fill="#6063ff" yAxisName="secondary"
period=3>
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/momentum/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Customization of MomentumIndicator
The stroke, stroke-width, and color of upperLine can be customized by using upperLine property of indicator.
@{
var upperline = new { color = "red", width="3" };
}
<ejs-chart id="container" title="AAPL - 2012-2017"
load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-chart-tooltipsettings enable="true" shared="true">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="false">
</e-chart-legendsettings>
<e-chart-axes>
<e-chart-axis name="secondary"
opposedPosition=true rowIndex=0
minimum=30 maximum=110>
</e-chart-axis>
</e-chart-axes>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Momentum" field="Close" seriesName="Apple Inc" fill="#6063ff" yAxisName="secondary"
period=3 upperLine="upperline">
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/custom-momentum/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Moving Average Convergence Divergence (MACD)
MACD is based on the difference between two EMA’s. To render a MACD Indicator, use indicator type as MACD. MACD indicator will be represented by MACD line, signal line, MACD histogram. MACD histogram is used to differentiate MACD line and signal line.
<ejs-chart id="container" title="AAPL - 2012-2017"
load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-chart-tooltipsettings enable="true" shared="true">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="false">
</e-chart-legendsettings>
<e-chart-axes>
<e-chart-axis name="secondary" opposedPosition=true minimum="10" maximum="110" >
</e-chart-axis>
</e-chart-axes>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Stochastic" field="Close" seriesName="Apple Inc" fill="blue" yAxisName="secondary"
period=3 showZones="true" kPeriod="3" dPeriod="2">
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/macd/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Customization of MACD
The stroke, stroke-width, and colorof macdLine can be customized by using macdLine property of indicator. The positive and negative changes of histogram can be customized by macdPositiveColor and macdNegativeColor properties. The macdType is used to define the type of MACD indicator. To customize the MACD period using slowPeriod and fastPeriod properties.
<ejs-chart id="container" title="AAPL - 2012-2017"
load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-chart-tooltipsettings enable="true" shared="true">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="false">
</e-chart-legendsettings>
<e-chart-axes>
<e-chart-axis name="secondary" opposedPosition=true >
</e-chart-axis>
</e-chart-axes>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Macd" field="Close" seriesName="Apple Inc" fill="green" yAxisName="secondary"
period=3 fastPeriod="5" slowPeriod="2" macdType="Line">
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/custom-macd/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Relative Strength Index (RSI)
RSI shows how strongly a stock is moving in its current direction. To render a RSI Indicator, use indicator type as Rsi. 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.
<ejs-chart id="container" title="AAPL - 2012-2017"
load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-chart-tooltipsettings enable="true" shared="true">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="false">
</e-chart-legendsettings>
<e-chart-axes>
<e-chart-axis name="secondary" opposedPosition=true minimum="10" maximum="110" >
</e-chart-axis>
</e-chart-axes>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Rsi" field="Close" seriesName="Apple Inc" fill="blue" yAxisName="secondary"
period=3 showZones="true" overBought="70" overSold="30">
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/rsi/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Simple Moving Average (SMA)
Moving average Indicators are used to define the direction of the trend. To render a SMA Indicator, use indicator type as Sma.
<ejs-chart id="container" title="AAPL - 2012-2017" load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-chart-tooltipsettings enable="true" shared="true">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="false">
</e-chart-legendsettings>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Sma" field="Close" seriesName="Apple Inc" fill="blue"
period=3>
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/sma/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Stochastic
It shows how a stock is, when compared to previous state. To render a Stochastic indicator, use indicator type as Stochastic. 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 overBought properties of indicators and the periodLine and signalLine is render based on stochastic formula.
<ejs-chart id="BollingerContainer" title="AAPL - 2012-2017"
load="window.onChartLoad">
<e-chart-chartarea border="border"></e-chart-chartarea>
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months" zoomFactor="0.2" zoomPosition="0.6" crosshairTooltip="crosshairTooltip" majorGridLines="line"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Price" minimum="75" maximum="170" interval="30" plotOffset="25" rowIndex="1" opposedPosition="true" majorTickLines="line" lineStyle="line" labelFormat="{value}%"></e-chart-primaryyaxis>
<e-chart-axes>
<e-chart-axis name="secondary"
opposedPosition=true rowIndex=0
lineStyle="line" minimum=0 maximum=120 interval=60
majorTickLines="line" title="Stochastic">
</e-chart-axis>
</e-chart-axes>
<e-chart-rows>
<e-chart-row height="40%"></e-chart-row>
<e-chart-row height="60%"></e-chart-row>
</e-chart-rows>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc" bearFillColor="#2ecd71" bullFillColor="#e74c3d"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Stochastic" field="Close" seriesName="Apple Inc" yAxisName="secondary" fill="#6063ff"
kPeriod=2 dPeriod=3 showZones=true periodLine="periodLine"
period=3 upperLine="upperLine" lowerLine="lowerLine">
</e-indicator>
</e-indicators>
<e-chart-zoomsettings enablePinchZooming="true" enableSelectionZooming="true" mode="X"></e-chart-zoomsettings>
<e-chart-legendsettings visible="false"></e-chart-legendsettings>
<e-chart-tooltipsettings enable="true" shared="true"></e-chart-tooltipsettings>
<e-chart-crosshairsettings enable="true" lineType="Vertical"></e-chart-crosshairsettings>
</ejs-chart>
<script src="chart/technical-indicators/stochastic/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Customization of StochasticIndicator
The stroke, stroke-width, and color of upperLine can be customized by using upperLine, the lowerLine can be customized by using lowerLine and the periodLine can be customized by using periodLine properties of indicator. To customize the period to find the average price using kPeriod and dPeriod properties.
<ejs-chart id="BollingerContainer" title="AAPL - 2012-2017"
load="window.onChartLoad">
<e-chart-chartarea border="border"></e-chart-chartarea>
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months" zoomFactor="0.2" zoomPosition="0.6" crosshairTooltip="crosshairTooltip" majorGridLines="line"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Price" minimum="75" maximum="170" interval="30" plotOffset="25" rowIndex="1" opposedPosition="true" majorTickLines="line" lineStyle="line" labelFormat="{value}%"></e-chart-primaryyaxis>
<e-chart-axes>
<e-chart-axis name="secondary"
opposedPosition=true rowIndex=0
lineStyle="line" minimum=0 maximum=120 interval=60
majorTickLines="line" title="Stochastic">
</e-chart-axis>
</e-chart-axes>
<e-chart-rows>
<e-chart-row height="40%"></e-chart-row>
<e-chart-row height="60%"></e-chart-row>
</e-chart-rows>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc" bearFillColor="#2ecd71" bullFillColor="#e74c3d"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Stochastic" field="Close" seriesName="Apple Inc" yAxisName="secondary" fill="#6063ff"
kPeriod=2 dPeriod=3 showZones=true periodLine="periodLine"
period=3 upperLine="upperLine" lowerLine="lowerLine">
</e-indicator>
</e-indicators>
<e-chart-zoomsettings enablePinchZooming="true" enableSelectionZooming="true" mode="X"></e-chart-zoomsettings>
<e-chart-legendsettings visible="false"></e-chart-legendsettings>
<e-chart-tooltipsettings enable="true" shared="true"></e-chart-tooltipsettings>
<e-chart-crosshairsettings enable="true" lineType="Vertical"></e-chart-crosshairsettings>
</ejs-chart>
<script src="chart/technical-indicators/stochastic/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Charts;
namespace EJ2MVCSampleBrowser.Controllers.Chart
{
public partial class ChartController : Controller
{
public ActionResult Stochastic()
{
ViewBag.crosshairTooltip = new { enable = true };
ViewBag.majorGridLines = new { width = 0.00001 };
ViewBag.lineStyle = new { width = 0.00001 };
ViewBag.animation = new { enable = false };
ViewBag.majorTickLines = new { width = 0.00001 };
ViewBag.upperLine =new { color = "#0f0000" };
ViewBag.lowerLine = new { color = "#080000" };
ViewBag.periodLine =new { color = "#f2ec2f" };
ViewBag.chartBorder = new ChartBorder { Color = "transparent" };
return View();
}
}
}Triangular Moving Average (TMA)
Moving average indicators are used to define the direction of the trend. To render a TMA Indicator, use indicator type as TMA.
<ejs-chart id="container" title="AAPL - 2012-2017"
load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-chart-tooltipsettings enable="true" shared="true">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="false">
</e-chart-legendsettings>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Tma" field="Close" seriesName="Apple Inc" fill="blue"
period=3>
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/tma/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Customization of Technical Indicators
The stroke, stroke-width, and color of signalLine can be customized by using fill, width and dashArray properties and the period property is used to predict the data forecast calculations. The field value is used to the compare the current price with previous price. It is applicable to Bollinger bands and moving averages. The showZones property is used to show or hide the overBought and overSold regions. It is applicable for RSI and stochastic indicators.
<ejs-chart id="container" title="AAPL - 2012-2017"
load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-chart-tooltipsettings enable="true" shared="true">
</e-chart-tooltipsettings>
<e-chart-legendsettings visible="false">
</e-chart-legendsettings>
<e-series-collection>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open" width=2
name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-series>
</e-series-collection>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Tma" field="Close" seriesName="Apple Inc" fill="red"
period=3>
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/custom-tma/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}public IActionResult Index()
{
return View();
}Data Source
Usually technical indicators are added along with a financial series. The seriesName represents the series, the data of which has to be analysed through indicators.
Technical indicators can also be added without series using dataSource property of indicator.
<ejs-chart id="ADIContainer" title="AAPL - 2012-2017" load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months"></e-chart-primaryxaxis>
<e-chart-tooltipsettings enable="true" shared="true"></e-chart-tooltipsettings>
<e-chart-legendsettings visible="false"></e-chart-legendsettings>
<e-chart-axes>
<e-chart-axis name="secondary"
opposedPosition=true rowIndex=0 interval=6000000000
minimum=-7000000000 maximum=5000000000
title="Accumulation Distribution">
</e-chart-axis>
</e-chart-axes>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.AccumulationDistribution" field="Close" seriesName="Apple Inc" yAxisName="secondary" fill="#6063ff" xName="x" yName="y" low="low" high="high" close="close" volume="volume" open="open"
period=3>
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/ad/financial-data.js"></script>
window.onChartLoad = function (args) {
args.chart.indicators[0].dataSource = chartData;
}public IActionResult Index()
{
return View();
}