Features

Kagi

Kagi

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

Features

Chart Types
Heikin-Ashi
Line Break
Renko
Kagi
ColumnVolume
EquiVolume
CandleVolume
Arms CandleVolume
Point and Figure
Interaction
Markers
Range Selector
Analytics
Trend Lines
Moving Averages
Overlays
Indicators
Event Annotations
Fibonacci Tool
BOX01/23/1502/09/1502/18/1503/11/1503/12/1503/30/1504/06/152024

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).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FinancialChartExplorer.Models;
 
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;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
@using FinancialChartExplorer.Models
 
@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>
 
 
@(Html.C1().FinancialChart()
.Id(demoSettingsModel.ControlId)
.Bind(Model)
.BindingX("X")
.ChartType(C1.Web.Mvc.Finance.ChartType.Kagi)
.Options(o => { o.KagiReversalAmount(2); o.KagiFields(C1.Web.Mvc.Finance.DataFields.High); o.KagiRangeMode(C1.Web.Mvc.Finance.RangeMode.Fixed); })
.Series(sers =>
    {
        sers.Add().Binding("High,Low,Open,Close").Name("BOX");
    })
.Tooltip(t => t.Content("financialTooltip")))
 
@section Description{
    <p>
        A Kagi chart displays supply and demand trends using a sequence of linked vertical lines.
    </p>
    <p>
        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).
    </p>
}
@section Summary{
    <p>
        A Kagi chart displays supply and demand trends using a sequence of linked vertical lines.
    </p>
}