FinancialChart - Kagi - ComponentOne ASP.NET Core Controls

Features

Kagi

A Kagi chart displays supply and demand trends using a sequence of linked vertical lines.

Features

Chart Types

Interaction

Analytics

Sample
Source
Documentation

Settings

Description

A Kagi chart displays supply and demand trends using a sequence of linked vertical lines.

The thickness and direction of the lines vary depending on the price movement. If closing prices go in the direction of the previous Kagi line, then that Kagi line is extended. However, if the closing price reverses by the preset reversal amount, a new Kagi line is charted in the next column in the opposite direction. Thin lines indicate that the price breaks the previous low (supply) while thick lines indicate that the price breaks the previous high (demand).

KagiController.cs
Kagi.cshtml

using System.Collections.Generic; 
using FinancialChartExplorer.Models; 
using Microsoft.AspNetCore.Mvc; 
  
namespace FinancialChartExplorer.Controllers 
{ 
    public partial class HomeController : Controller 
    { 
        public ActionResult Kagi() 
        { 
            var model = BoxData.GetDataFromJson(); 
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { Settings = CreateKagiSettings() }; 
            return View(model); 
        } 
  
        private static IDictionary<string, object[]> CreateKagiSettings() 
        { 
            var settings = new Dictionary<string, object[]> 
            { 
                {"Options.Kagi.ReversalAmount", new object[]{"2","3","4","5","6","7","8","9","10"}}, 
                {"Options.Kagi.RangeMode", new object[]{"Fixed","ATR","Percentage"}}, 
                {"Options.Kagi.Fields", new object[]{"High","Low","Open","Close","HighLow","HL2","HLC3","HLOC4"}}, 
            }; 
  
            return settings; 
        } 
  
    } 
} 

@model List<FinanceData> 
@{ 
    ViewBag.DemoSettings = true; 
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; 
} 
  
<script type="text/javascript">
    function customChangeOptions_Kagi_ReversalAmount(control, value) { 
        var reversalAmount = +value; 
        control.options.kagi.reversalAmount = control.options.kagi.rangeMode === wijmo.chart.finance.RangeMode.Percentage ? (reversalAmount / 100) : reversalAmount; 
        control.invalidate(); 
    } 
  
    function customChangeOptions_Kagi_RangeMode(control, value) { 
        var reversalAmount = control.options.kagi.reversalAmount; 
        if (value !== "Percentage") { 
            if (reversalAmount < 1) { 
                control.options.kagi.reversalAmount = Math.round(reversalAmount * 100); 
            } 
        } else { 
            if (reversalAmount > 1) { 
                control.options.kagi.reversalAmount = reversalAmount / 100; 
            } 
        } 
  
        control.options.kagi.rangeMode = wijmo.chart.finance.RangeMode[value]; 
        control.invalidate(); 
    } 
  
    function convertOptions_Kagi_Fields(value) { 
        return wijmo.chart.finance.DataFields[value]; 
    } 
  
</script>
  
<c1-financial-chart id="@demoSettingsModel.ControlId" binding-x="X" chart-type="Kagi" kagi-fields="High" kagi-range-mode="Fixed" kagi-reversal-amount="2"> 
    <c1-items-source source-collection="@Model"></c1-items-source> 
    <c1-financial-chart-series binding="High,Low,Open,Close" name="BOX"></c1-financial-chart-series> 
    <c1-flex-chart-tooltip content="financialTooltip"></c1-flex-chart-tooltip> 
</c1-financial-chart> 
  
@section Description{ 
    <p>@Html.Raw(Home.Kagi_Text0)</p> 
    <p>@Html.Raw(Home.Kagi_Text1)</p> 
} 
@section Summary{ 
    <p>@Html.Raw(Home.Kagi_Text2)</p> 
} 