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 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" axisLabelRender="axisLabel" load="window.onChartLoad">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Months" zoomFactor=0.2 zoomPosition=0.6></e-chart-primaryxaxis>
<e-chart-tooltipsettings enable="true" shared="true"></e-chart-tooltipsettings>
<e-chart-legendsettings visible="false"></e-chart-legendsettings>
<e-chart-zoomsettings 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
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" bearFillColor="#2ecd71" bullFillColor="#e74c3d"
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>
<script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = window.chartData;
}
</script>
public IActionResult Index()
{
return View();
}
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
.
<script src="chart/technical-indicators/atr/financial-data.js"></script>
@Html.EJS().Chart("container-vertical").Rows(rows =>
{
rows.Height("40%").Add();
rows.Height("60%").Add();
}).Axes(ax =>
{
ax.Name("secondary").LineStyle(ViewBag.Line).Title("ATR").MajorTickLines(ViewBag.majorGridLines).OpposedPosition(true).Minimum(0).Maximum(14).Interval(7).RowIndex(0).Add();
}
).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").YName("y").High("high").Low("low").Open("open").Close("close").Volume("volume").BearFillColor("#2ecd71").BullFillColor("#e74c3d").DataSource("dataSource").Name("Apple Inc").Width(2).Add();
}).Indicators(id =>
{
id.Fill("#6063ff").KPeriod(2).DPeriod(3).YAxisName("secondary").Period(3).Type(Syncfusion.EJ2.Charts.TechnicalIndicators.Atr).Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close).SeriesName("Apple Inc").Add();
}).ZoomSettings(zn => zn.EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
).PrimaryXAxis(px => px.ZoomFactor(0.2).ZoomPosition(0.6).MajorGridLines(ViewBag.Line).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
).PrimaryYAxis(py => py.LineStyle(ViewBag.Line).RowIndex(1).OpposedPosition(true).Title("Price").Minimum(80).Maximum(170).Interval(30).LabelFormat("{value}M").PlotOffset(25)
).Title("AAPL 2012-2017").ChartArea(area => area.Border(ViewBag.ChartBorder)).Tooltip(tl => tl.Enable(true).Shared(true)).LegendSettings(lg => lg.Visible(false)).Load("load").Render()
<script>
var dataSource = window.chartData;
</script>
public IActionResult Index()
{
return View();
}
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.
<script src="chart/technical-indicators/bollinger/financial-data.js"></script>
@(Html.EJS().Chart("container-vertical").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle)
.XName("x")
.YName("y")
.High("high")
.Low("low")
.Open("open")
.Close("close")
.Volume("volume")
.BearFillColor("#2ecd71")
.BullFillColor("#e74c3d")
.DataSource("dataSource")
.Name("Apple Inc")
.Width(2).Add();
}).Indicators(id =>
{
id.Fill("#6063ff")
.Period(14)
.UpperLine(ViewBag.upperline)
.LowerLine(ViewBag.lowerline)
.Animation(ViewBag.animation)
.Type(Syncfusion.EJ2.Charts.TechnicalIndicators.BollingerBands)
.Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close)
.SeriesName("Apple Inc").Add();
})
.ZoomSettings(zn => zn.EnableSelectionZooming(true)
.Mode(Syncfusion.EJ2.Charts.ZoomMode.X))
.Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true))
.PrimaryXAxis(px => px.ZoomFactor(0.2).CrosshairTooltip(ViewBag.crosshairtooltip).MajorGridLines(ViewBag.gridlines).ZoomPosition(0.6).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime))
.PrimaryYAxis(py => py.Title("Price").Minimum(50).Maximum(170).Interval(30).LineStyle(ViewBag.linestyle).LabelFormat("{value}M"))
.Title("AAPL 2012-2017")
.Tooltip(tl => tl.Enable(true).Shared(true))
.LegendSettings(lg => lg.Visible(false))
.ChartArea(area => area.Border(ViewBag.ChartBorder)).Load("load").Render()
)
<script>
var dataSource = window.chartData;
</script>
public IActionResult Index()
{
return View();
}
Customization of BollingerBand
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.
Moving average Indicators are used to define the direction of the trend. To render a EMA Indicator,
use indicator type
as Ema
.
<script src="chart/technical-indicators/ema/financial-data.js"></script>
@(Html.EJS().Chart("container-vertical").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle)
.XName("x")
.YName("y")
.High("high")
.Low("low")
.Open("open")
.Close("close")
.Volume("volume")
.BearFillColor("#2ecd71")
.BullFillColor("#e74c3d")
.DataSource("dataSource")
.Name("Apple Inc")
.Width(2).Add();
}).Indicators(id =>
{
id.Fill("#6063ff")
.Period(14)
.Type(Syncfusion.EJ2.Charts.TechnicalIndicators.Ema)
.Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close)
.SeriesName("Apple Inc").Add();
})
.ZoomSettings(zn => zn.EnableSelectionZooming(true)
.Mode(Syncfusion.EJ2.Charts.ZoomMode.X))
.Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true))
.PrimaryXAxis(px => px.ZoomFactor(0.2).ZoomPosition(0.6).MajorGridLines(ViewBag.border).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime))
.PrimaryYAxis(py => py.Title("Price").Minimum(50).LineStyle(ViewBag.border).Maximum(170).Interval(30).LabelFormat("{value}M"))
.Title("AAPL 2012-2017")
.Tooltip(tl => tl.Enable(true).Shared(true))
.LegendSettings(lg => lg.Visible(false))
.ChartArea(area => area.Border(ViewBag.ChartBorder)).Load("load").Render()
)
<script>
var dataSource = window.chartData;
</script>
public IActionResult Index()
{
return View();
}
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.
<script src="chart/technical-indicators/momentum/financial-data.js"></script>
@Html.EJS().Chart("container-vertical").Rows(rows =>
{
rows.Height("40%").Add();
rows.Height("60%").Add();
}).Axes(ax =>
{
ax.Name("secondary").OpposedPosition(true).Minimum(80).Maximum(120).Interval(20).Title("Momentum").LineStyle(ViewBag.lineStyle).MajorGridLines(ViewBag.majorGridLines).MajorTickLines(ViewBag.majorTickLines).RowIndex(0).Add();
}
).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").YName("y").High("high").Low("low").Open("open").Close("close").Volume("volume").BearFillColor("#2ecd71").BullFillColor("#e74c3d").DataSource("dataSource").Name("Apple Inc").Width(2).Add();
}).Indicators(id =>
{
id.Fill("#6063ff")
.YAxisName("secondary")
.UpperLine(ViewBag.upperline)
.Period(3)
.Type(Syncfusion.EJ2.Charts.TechnicalIndicators.Momentum)
.Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close)
.SeriesName("Apple Inc").Add();
})
.ZoomSettings(zn => zn.EnableSelectionZooming(true)
.Mode(Syncfusion.EJ2.Charts.ZoomMode.X))
.Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
)
.PrimaryXAxis(px => px.ZoomFactor(0.2)
.ZoomPosition(0.6)
.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
.MajorGridLines(ViewBag.majorGridLines)
.CrosshairTooltip(ViewBag.crosshairTooltip)
).PrimaryYAxis(py => py.RowIndex(1)
.OpposedPosition(true).Title("Price")
.Minimum(50).Maximum(170)
.Interval(30)
.LabelFormat("{value}M")
.PlotOffset(25)
.LineStyle(ViewBag.lineStyle)
).Title("AAPL 2012-2017")
.ChartArea(area => area.Border(ViewBag.ChartBorder))
.Tooltip(tl => tl.Enable(true).Shared(true))
.LegendSettings(lg => lg.Visible(false)).Load("load").Render()
<script>
var dataSource = window.chartData;
</script>
public IActionResult Index()
{
return View();
}
Customization of MomentumIndicator
stroke
, stroke-width
, and color
of upperLine can be customized by using,upperLine
,
property of indicator.
<script src="chart/technical-indicators/momentum/financial-data.js"></script>
@Html.EJS().Chart("container-vertical").Rows(rows =>
{
rows.Height("40%").Add();
rows.Height("60%").Add();
}).Axes(ax =>
{
ax.Name("secondary").OpposedPosition(true).Minimum(80).Maximum(120).Interval(20).Title("Momentum").LineStyle(ViewBag.lineStyle).MajorGridLines(ViewBag.majorGridLines).MajorTickLines(ViewBag.majorTickLines).RowIndex(0).Add();
}
).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").YName("y").High("high").Low("low").Open("open").Close("close").Volume("volume").BearFillColor("#2ecd71").BullFillColor("#e74c3d").DataSource("dataSource").Name("Apple Inc").Width(2).Add();
}).Indicators(id =>
{
id.Fill("#6063ff")
.YAxisName("secondary")
.UpperLine(ViewBag.upperline)
.Period(3)
.Type(Syncfusion.EJ2.Charts.TechnicalIndicators.Momentum)
.Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close)
.SeriesName("Apple Inc").Add();
})
.ZoomSettings(zn => zn.EnableSelectionZooming(true)
.Mode(Syncfusion.EJ2.Charts.ZoomMode.X))
.Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
)
.PrimaryXAxis(px => px.ZoomFactor(0.2)
.ZoomPosition(0.6)
.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
.MajorGridLines(ViewBag.majorGridLines)
.CrosshairTooltip(ViewBag.crosshairTooltip)
).PrimaryYAxis(py => py.RowIndex(1)
.OpposedPosition(true).Title("Price")
.Minimum(50).Maximum(170)
.Interval(30)
.LabelFormat("{value}M")
.PlotOffset(25)
.LineStyle(ViewBag.lineStyle)
).Title("AAPL 2012-2017")
.ChartArea(area => area.Border(ViewBag.ChartBorder))
.Tooltip(tl => tl.Enable(true).Shared(true))
.LegendSettings(lg => lg.Visible(false)).Load("load").Render()
<script>
var dataSource = window.chartData;
</script>
public IActionResult Index()
{
return View();
}
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.
<script src="chart/technical-indicators/macd/financial-data.js"></script>
@Html.EJS().Chart("container-vertical").Rows(rows =>
{
rows.Height("40%").Add();
rows.Height("60%").Add();
}).Axes(ax =>
{
ax.Name("secondary").Title("MACD").OpposedPosition(true).Minimum(-3.5).Maximum(3.5).MajorTickLines(ViewBag.majorTickLines).MajorGridLines(ViewBag.majorGridLines).Interval(3.5).RowIndex(0).LineStyle(ViewBag.lineStyle).Add();
}
).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").YName("y").High("high").Low("low").Open("open").Close("close").Volume("volume").BearFillColor("#2ecd71").BullFillColor("#e74c3d").DataSource("dataSource").Name("Apple Inc").Width(2).Add();
}).Indicators(id =>
{
id.Fill("#6063ff").MacdType(Syncfusion.EJ2.Charts.MacdType.Both).MacdPositiveColor("#2ecd71").MacdNegativeColor("#e74c3d").Fill("#6063ff").YAxisName("secondary").FastPeriod(8).SlowPeriod(5).Period(3).Type(Syncfusion.EJ2.Charts.TechnicalIndicators.Macd).Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close).SeriesName("Apple Inc").Add();
}).ZoomSettings(zn => zn.EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
).PrimaryXAxis(px => px.ZoomFactor(0.2).ZoomPosition(0.6).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).MajorGridLines(ViewBag.majorGridLines)
).PrimaryYAxis(py => py.RowIndex(1).OpposedPosition(true).LabelFormat("${value}M").Title("Price").Minimum(50).Maximum(170).Interval(30).LineStyle(ViewBag.lineStyle).LabelFormat("{value}M").PlotOffset(25)
).Title("AAPL 2012-2017").ChartArea(area => area.Border(ViewBag.ChartBorder)).Tooltip(tl => tl.Enable(true).Shared(true)).LegendSettings(lg => lg.Visible(false)).Load("load").Render()
<script>
var dataSource = window.chartData;
</script>
public IActionResult Index()
{
return View();
}
Customization of MACD
stroke
, stroke-width
, and color
of 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.
<script src="chart/technical-indicators/macd/financial-data.js"></script>
@Html.EJS().Chart("container-vertical").Rows(rows =>
{
rows.Height("40%").Add();
rows.Height("60%").Add();
}).Axes(ax =>
{
ax.Name("secondary").Title("MACD").OpposedPosition(true).Minimum(-3.5).Maximum(3.5).MajorTickLines(ViewBag.majorTickLines).MajorGridLines(ViewBag.majorGridLines).Interval(3.5).RowIndex(0).LineStyle(ViewBag.lineStyle).Add();
}
).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").YName("y").High("high").Low("low").Open("open").Close("close").Volume("volume").BearFillColor("#2ecd71").BullFillColor("#e74c3d").DataSource("dataSource").Name("Apple Inc").Width(2).Add();
}).Indicators(id =>
{
id.Fill("#6063ff").MacdType(Syncfusion.EJ2.Charts.MacdType.Both).MacdPositiveColor("#2ecd71").MacdNegativeColor("#e74c3d").Fill("#6063ff").YAxisName("secondary").FastPeriod(8).SlowPeriod(5).Period(3).Type(Syncfusion.EJ2.Charts.TechnicalIndicators.Macd).Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close).SeriesName("Apple Inc").Add();
}).ZoomSettings(zn => zn.EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
).PrimaryXAxis(px => px.ZoomFactor(0.2).ZoomPosition(0.6).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).MajorGridLines(ViewBag.majorGridLines)
).PrimaryYAxis(py => py.RowIndex(1).OpposedPosition(true).LabelFormat("${value}M").Title("Price").Minimum(50).Maximum(170).Interval(30).LineStyle(ViewBag.lineStyle).LabelFormat("{value}M").PlotOffset(25)
).Title("AAPL 2012-2017").ChartArea(area => area.Border(ViewBag.ChartBorder)).Tooltip(tl => tl.Enable(true).Shared(true)).LegendSettings(lg => lg.Visible(false)).Load("load").Render()
<script>
var dataSource = window.chartData;
</script>
public IActionResult Index()
{
return View();
}
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.
<script src="chart/technical-indicators/rsi/financial-data.js"></script>
@Html.EJS().Chart("container-vertical").Rows(rows =>
{
rows.Height("40%").Add();
rows.Height("60%").Add();
}).Axes(ax =>
{
ax.Name("secondary").OpposedPosition(true).Title("RSI").Minimum(0).Maximum(120).MajorTickLines(ViewBag.majorTickLines)
.MajorGridLines(ViewBag.majorGridLines).LineStyle(ViewBag.lineStyle).Interval(60).RowIndex(0).Add();
}
).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").YName("y").High("high").Low("low").Open("open").Close("close").Volume("volume").BearFillColor("#2ecd71").BullFillColor("#e74c3d").DataSource("dataSource").Name("Apple Inc").Width(2).Add();
}).Indicators(id =>
{
id.Fill("#6063ff").ShowZones(true).OverBought(70).LowerLine(ViewBag.lowerLine).UpperLine(ViewBag.upperLine).OverSold(30).YAxisName("secondary").Period(3).Type(Syncfusion.EJ2.Charts.TechnicalIndicators.Rsi).Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close).SeriesName("Apple Inc").Add();
}).ZoomSettings(zn => zn.EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
).PrimaryXAxis(px => px.ZoomFactor(0.2).ZoomPosition(0.6).MajorGridLines(ViewBag.majorGridLines).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
).PrimaryYAxis(py => py.RowIndex(1).OpposedPosition(true).Title("Price").MajorTickLines(ViewBag.majorTickLines)
.LineStyle(ViewBag.lineStyle).Minimum(50).Maximum(170).Interval(30).LabelFormat("${value}").PlotOffset(25)
).Title("AAPL 2012-2017").ChartArea(area => area.Border(ViewBag.ChartBorder)).Tooltip(tl => tl.Enable(true).Shared(true)).LegendSettings(lg => lg.Visible(false)).Load("load").Render()
<script>
var dataSource = window.chartData;
</script>
public IActionResult Index()
{
return View();
}
Moving average Indicators are used to define the direction of the trend. To render a SMA Indicator,
use indicator type
as
Sma
.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").YName("y").High("high").Low("low").Open("open").Close("close").Volume("volume").BearFillColor("#2ecd71").BullFillColor("#e74c3d").DataSource("dataSource").Name("Apple Inc").Width(2).Add();
}).Indicators(id =>
{
id.Fill("#6063ff").Period(14).Type(Syncfusion.EJ2.Charts.TechnicalIndicators.Sma).Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close).SeriesName("Apple Inc").Add();
}).ZoomSettings(zn => zn.EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
).PrimaryXAxis(px => px.ZoomFactor(0.2).ZoomPosition(0.6).CrosshairTooltip(ViewBag.crosshairTooltip).MajorGridLines(ViewBag.majorGridLines).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
).PrimaryYAxis(py => py.Title("Price").Minimum(50).Maximum(170).Interval(30).LineStyle(ViewBag.lineStyle).LabelFormat("{value}M")
).Title("AAPL 2012-2017").ChartArea(area => area.Border(ViewBag.ChartBorder)).Tooltip(tl => tl.Enable(true).Shared(true)).LegendSettings(lg => lg.Visible(false)).Load("load").Render()
<script>
var dataSource = window.chartData;
</script>
public IActionResult Index()
{
return View();
}
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.
@Html.EJS().Chart("container-vertical").Rows(rows =>
{
rows.Height("40%").Add();
rows.Height("60%").Add();
}).Axes(ax =>
{
ax.Name("secondary").OpposedPosition(true).Minimum(0).Maximum(120).LineStyle(ViewBag.lineStyle).MajorGridLines(ViewBag.majorGridLines).MajorTickLines(ViewBag.majorTickLines)
.Interval(60).RowIndex(0).Add();
}
).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").YName("y").High("high").Low("low").Open("open").Close("close").Volume("volume").BearFillColor("#2ecd71").BullFillColor("#e74c3d").DataSource("dataSource").Name("Apple Inc").Width(2).Add();
}).Indicators(id =>
{
id.Fill("#6063ff").KPeriod(2).DPeriod(3).YAxisName("secondary").Period(3).LowerLine(ViewBag.lowerLine).UpperLine(ViewBag.upperLine).PeriodLine(ViewBag.periodLine).Animation(ViewBag.animation).Type(Syncfusion.EJ2.Charts.TechnicalIndicators.Stochastic).Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close).SeriesName("Apple Inc").Add();
}).ZoomSettings(zn => zn.EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
).PrimaryXAxis(px => px.ZoomFactor(0.2).ZoomPosition(0.6).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).MajorGridLines(ViewBag.majorGridLines)
).ChartArea(area => area.Border(ViewBag.ChartBorder)).PrimaryYAxis(py => py.RowIndex(1).OpposedPosition(true).Title("Price").LineStyle(ViewBag.lineStyle).Minimum(80).Maximum(170).Interval(30).LabelFormat("{value}M").PlotOffset(25)
).Title("AAPL 2012-2017").Tooltip(tl => tl.Enable(true).Shared(true)).LegendSettings(lg => lg.Visible(false)).Load("load").Render()
<script>
var dataSource = window.chartData;
</script>
public IActionResult Index()
{
return View();
}
Customization of StochasticIndicator
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.
<script src="chart/technical-indicators/stochastic/financial-data.js"></script>
@Html.EJS().Chart("container-vertical").Rows(rows =>
{
rows.Height("40%").Add();
rows.Height("60%").Add();
}).Axes(ax =>
{
ax.Name("secondary").OpposedPosition(true).Minimum(0).Maximum(120).LineStyle(ViewBag.lineStyle).MajorGridLines(ViewBag.majorGridLines).MajorTickLines(ViewBag.majorTickLines)
.Interval(60).RowIndex(0).Add();
}
).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").YName("y").High("high").Low("low").Open("open").Close("close").Volume("volume").BearFillColor("#2ecd71").BullFillColor("#e74c3d").DataSource("dataSource").Name("Apple Inc").Width(2).Add();
}).Indicators(id =>
{
id.Fill("#6063ff").KPeriod(2).DPeriod(3).YAxisName("secondary").Period(3).LowerLine(ViewBag.lowerLine).UpperLine(ViewBag.upperLine).PeriodLine(ViewBag.periodLine).Animation(ViewBag.animation).Type(Syncfusion.EJ2.Charts.TechnicalIndicators.Stochastic).Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close).SeriesName("Apple Inc").Add();
}).ZoomSettings(zn => zn.EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
).PrimaryXAxis(px => px.ZoomFactor(0.2).ZoomPosition(0.6).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).MajorGridLines(ViewBag.majorGridLines)
).ChartArea(area => area.Border(ViewBag.ChartBorder)).PrimaryYAxis(py => py.RowIndex(1).OpposedPosition(true).Title("Price").LineStyle(ViewBag.lineStyle).Minimum(80).Maximum(170).Interval(30).LabelFormat("{value}M").PlotOffset(25)
).Title("AAPL 2012-2017").Tooltip(tl => tl.Enable(true).Shared(true)).LegendSettings(lg => lg.Visible(false)).Load("load").Render()
}
<script>
var dataSource = window.chartData;
</script>
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();
}
}
}
Moving average indicators are used to define the direction of the trend. To render a TMA Indicator,
use indicator type
as
TMA
.
<script src="chart/technical-indicators/tma/financial-data.js"></script>
@Html.EJS().Chart("container-vertical").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").YName("y").Animation(ViewBag.animation)
.High("high").Low("low").Open("open").Close("close").Volume("volume").BearFillColor("#2ecd71").BullFillColor("#e74c3d").DataSource("dataSource").Name("Apple Inc").Width(2).Add();
}).Indicators(id =>
{
id.Fill("#6063ff").Period(3).Type(Syncfusion.EJ2.Charts.TechnicalIndicators.Tma).Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close).SeriesName("Apple Inc").Add();
}).ZoomSettings(zn => zn.EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
).PrimaryXAxis(px => px.ZoomFactor(0.2).ZoomPosition(0.6).CrosshairTooltip(ViewBag.crosshairTooltip).MajorGridLines(ViewBag.majorGridLines)
.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
).PrimaryYAxis(py => py.Title("Price").Minimum(50).Maximum(170).Interval(30)
.LineStyle(ViewBag.lineStyle).LabelFormat("{value}M")
).Title("AAPL 2012-2017").ChartArea(area => area.Border(ViewBag.ChartBorder)).Tooltip(tl => tl.Enable(true).Shared(true)).LegendSettings(lg => lg.Visible(false)).Load("load").Render()
<script>
var dataSource = window.chartData;
</script>
public IActionResult Index()
{
return View();
}
Customization of Technical Indicators
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 shows/Hides the overBought and overSold regions. It is applicable for RSI and stochastic indicators.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").Render()
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.
<script src="chart/technical-indicators/ad/financial-data.js"></script>
@Html.EJS().Chart("container-vertical").Rows(rows =>
{
rows.Height("40%").Add();
rows.Height("60%").Add();
}).Axes(ax =>
{
ax.Name("secondary").
OpposedPosition(true).
Minimum(-7000000000).
Maximum(5000000000).
Interval(6000000000).
Title("Accumulation Distribution").MajorTickLines(ViewBag.majorTickLines).LineStyle(ViewBag.lineStyle).
RowIndex(0).Add();
}
).Indicators(id =>
{
id.Fill("#6063ff").KPeriod(2).DPeriod(3).YAxisName("secondary").Period(3).Type(Syncfusion.EJ2.Charts.TechnicalIndicators.AccumulationDistribution).Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close).SeriesName("Apple Inc").Add();
}).ZoomSettings(zn => zn.EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
).PrimaryXAxis(px => {
px.ZoomFactor(0.2).MajorGridLines(dataT).ZoomPosition(0.6).MajorGridLines(ViewBag.majorGridLines).CrosshairTooltip(ViewBag.crosshairTooltip).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime);
}).PrimaryYAxis(py => py.RowIndex(1).OpposedPosition(true).LineStyle(ViewBag.lineStyle).Title("Price").Minimum(80).Maximum(170).Interval(30).LabelFormat("${value}").PlotOffset(25)
<script>
var dataSource = window.chartData;
</script>
public IActionResult Index()
{
return View();
}