The mathematical relationships, the ratios, between the Fibonacci sequence are used to identify possible support and resistance levels on a stock chart. These percentages, at 23.6%, 38.2%, 50%, 61.8% and 100%, determine critical points that may cause an asset's price to reverse. Financial Chart for MVC's Fibonacci tool can be used to mark an uptrend or a downtrend with one property. The Uptrend property, when set to True, marks uptrends, with higher highs and higher lows. When set to False, the property marks downtrends, with lower highs and lower lows.

The Fibonacci feature in a financial chart




You can add a Fibonacci retracement to your existing Financial Chart application with either MVC Helper syntax or Tag Helper syntax:

MVC Helpers for Fibonacci Tool

:

@using MVCFinancialChart.Models

@model List<FinanceData>

<script type="text/javascript">
var tooltipContent = function (ht) {
var item = ht.series.collectionView.items[ht.pointIndex];
if (item) {
return 'Date: ' + wijmo.Globalize.format(ht.x, 'MMM-dd') + '<br/>' +
'High: ' + item.High.toFixed() + '<br/>' +
'Low: ' + item.Low.toFixed() + '<br/>' +
'Open: ' + item.Open.toFixed() + '<br/>' +
'Close: ' + item.Close.toFixed() + '<br/>'
}
};

</script>

@(Html.C1().FinancialChart()
.Bind(Model)
.BindingX("X")
.ChartType(C1.Web.Mvc.Finance.ChartType.Candlestick)
.Series(sers =>
{
sers.Add().Binding("High,Low,Open,Close");
sers.AddFibonacci().Binding("Close").Uptrend(true).LabelPosition(C1.Web.Mvc.Chart.LabelPosition.Left);
})
.Tooltip(t => t.Content("tooltipContent")))


Tag Helpers for Fibonacci Tool

:

@using C1.Web.Mvc.Chart;
@model List<FinanceData>


<script type="text/javascript">
var tooltipContent = function (ht) {
var item = ht.series.collectionView.items[ht.pointIndex];
if (item) {
return 'Date: ' + wijmo.Globalize.format(ht.x, 'MMM-dd') + '<br/>' +
'High: ' + item.High.toFixed() + '<br/>' +
'Low: ' + item.Low.toFixed() + '<br/>' +
'Open: ' + item.Open.toFixed() + '<br/>' +
'Close: ' + item.Close.toFixed() + '<br/>'
}
};
</script>


<c1-financial-chart binding-x="X" chart-type="C1.Web.Mvc.Finance.ChartType.Candlestick">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-financial-chart-series binding="High,Low,Open,Close"></c1-financial-chart-series>
<c1-flex-chart-fibonacci binding="Close" uptrend="true" label-position="LabelPosition.Left"></c1-flex-chart-fibonacci>
<c1-flex-chart-tooltip content="tooltipContent"></c1-flex-chart-tooltip>
</c1-financial-chart>



Check out Financial Chart's documentation >>


Read more about FinancialChart for MVC >>