Loading
Kagi Chart
Developed by the Japanese in the 1870s, the Kagi chart uses a series of vertical lines to illustrate general levels of supply and demand for certain assets. Thick lines are drawn when the price of the underlying asset breaks above the previous high price and is interpreted as an increase in demand for the asset. Thin lines are used to represent increased stock when the price falls below the previous low.
A simple Kagi chart looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Stock Price HRYS",
"subCaption": "Last 2 months",
"numberPrefix": "$",
"xAxisName": "Day",
"yAxisName": "Amount (In USD)",
"showValues": "0",
"drawAnchors": "0",
"labelDisplay": "Rotate",
"reversalPercentage": "5",
"showBorder": "0",
"bgColor": "#ffffff",
"showCanvasBorder": "0",
"showXAxisLine": "1",
"axisLineAlpha": "40",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"rallycolor": "#0075c2",
"declinecolor": "#8e0000",
"rallythickness": "3",
"declinethickness": "3",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showAlternateHGridColor": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"data": [
{
"label": "Day 60",
"value": "18.99"
},
{
"label": "Day 59",
"value": "18.82"
},
{
"label": "Day 58",
"value": "18.65"
},
{
"label": "Day 57",
"value": "19.4"
},
{
"label": "Day 56",
"value": "19.92"
},
{
"label": "Day 55",
"value": "20.16"
},
{
"label": "Day 54",
"value": "20.48"
},
{
"label": "Day 53",
"value": "20.15"
},
{
"label": "Day 52",
"value": "20.22"
},
{
"label": "Day 51",
"value": "19.44"
},
{
"label": "Day 50",
"value": "19.22"
},
{
"label": "Day 49",
"value": "19.24"
},
{
"label": "Day 48",
"value": "18.95"
},
{
"label": "Day 47",
"value": "18.97"
},
{
"label": "Day 46",
"value": "18.7"
},
{
"label": "Day 45",
"value": "19.05"
},
{
"label": "Day 44",
"value": "19.33"
},
{
"label": "Day 43",
"value": "18.52"
},
{
"label": "Day 42",
"value": "18.26"
},
{
"label": "Day 41",
"value": "18.51"
},
{
"label": "Day 40",
"value": "18.66"
},
{
"label": "Day 39",
"value": "19.2"
},
{
"label": "Day 38",
"value": "19.33"
},
{
"label": "Day 37",
"value": "19.27"
},
{
"label": "Day 36",
"value": "19.77"
},
{
"label": "Day 35",
"value": "19.88"
},
{
"label": "Day 34",
"close": "19.63"
},
{
"label": "Day 33",
"value": "20.65"
},
{
"label": "Day 32",
"value": "21.33"
},
{
"label": "Day 31",
"value": "20.56"
},
{
"label": "Day 30",
"value": "20.36"
},
{
"label": "Day 29",
"value": "20.03"
},
{
"label": "Day 28",
"value": "19.88"
},
{
"label": "Day 27",
"value": "19.9"
},
{
"label": "Day 26",
"value": "19.5"
},
{
"label": "Day 25",
"value": "19.43"
},
{
"label": "Day 24",
"value": "19.41"
},
{
"label": "Day 23",
"value": "19.83"
},
{
"label": "Day 22",
"value": "21"
},
{
"label": "Day 21",
"value": "20.44"
},
{
"label": "Day 20",
"value": "20.3"
},
{
"label": "Day 19",
"value": "21.63"
},
{
"label": "Day 18",
"value": "23.28"
},
{
"label": "Day 17",
"value": "23.94"
},
{
"label": "Day 16",
"value": "23.48"
},
{
"label": "Day 15",
"value": "22.74"
},
{
"label": "Day 14",
"value": "22.24"
},
{
"label": "Day 13",
"value": "22.42"
},
{
"label": "Day 12",
"value": "22.68"
},
{
"label": "Day 11",
"value": "23.46"
},
{
"label": "Day 10",
"value": "23.6"
},
{
"label": "Day 9",
"value": "24.15"
},
{
"label": "Day 8",
"value": "24.1"
},
{
"label": "Day 7",
"value": "23.47"
},
{
"label": "Day 6",
"value": "23.76"
},
{
"label": "Day 55",
"value": "23.66"
},
{
"label": "Day 5",
"value": "23.79"
},
{
"label": "Day 4",
"value": "23.39"
},
{
"label": "Day 3",
"value": "23.88"
},
{
"label": "Day 2",
"value": "23.01"
},
{
"label": "Yesterday",
"value": "23.32"
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'kagi',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Stock Price HRYS",
"subCaption": "Last 2 months",
"numberPrefix": "$",
"xAxisName": "Day",
"yAxisName": "Amount (In USD)",
"showValues": "0",
"drawAnchors": "0",
"labelDisplay": "Rotate",
"reversalPercentage": "5",
"showBorder": "0",
"bgColor": "#ffffff",
"showCanvasBorder": "0",
"showXAxisLine": "1",
"axisLineAlpha": "40",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"rallycolor": "#0075c2",
"declinecolor": "#8e0000",
"rallythickness": "3",
"declinethickness": "3",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showAlternateHGridColor": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
},
"data": [{
"label": "Day 60",
"value": "18.99"
}, {
"label": "Day 59",
"value": "18.82"
}, {
"label": "Day 58",
"value": "18.65"
}, {
"label": "Day 57",
"value": "19.4"
}, {
"label": "Day 56",
"value": "19.92"
}, {
"label": "Day 55",
"value": "20.16"
}, {
"label": "Day 54",
"value": "20.48"
}, {
"label": "Day 53",
"value": "20.15"
}, {
"label": "Day 52",
"value": "20.22"
}, {
"label": "Day 51",
"value": "19.44"
}, {
"label": "Day 50",
"value": "19.22"
}, {
"label": "Day 49",
"value": "19.24"
}, {
"label": "Day 48",
"value": "18.95"
}, {
"label": "Day 47",
"value": "18.97"
}, {
"label": "Day 46",
"value": "18.7"
}, {
"label": "Day 45",
"value": "19.05"
}, {
"label": "Day 44",
"value": "19.33"
}, {
"label": "Day 43",
"value": "18.52"
}, {
"label": "Day 42",
"value": "18.26"
}, {
"label": "Day 41",
"value": "18.51"
}, {
"label": "Day 40",
"value": "18.66"
}, {
"label": "Day 39",
"value": "19.2"
}, {
"label": "Day 38",
"value": "19.33"
}, {
"label": "Day 37",
"value": "19.27"
}, {
"label": "Day 36",
"value": "19.77"
}, {
"label": "Day 35",
"value": "19.88"
}, {
"label": "Day 34",
"close": "19.63"
}, {
"label": "Day 33",
"value": "20.65"
}, {
"label": "Day 32",
"value": "21.33"
}, {
"label": "Day 31",
"value": "20.56"
}, {
"label": "Day 30",
"value": "20.36"
}, {
"label": "Day 29",
"value": "20.03"
}, {
"label": "Day 28",
"value": "19.88"
}, {
"label": "Day 27",
"value": "19.9"
}, {
"label": "Day 26",
"value": "19.5"
}, {
"label": "Day 25",
"value": "19.43"
}, {
"label": "Day 24",
"value": "19.41"
}, {
"label": "Day 23",
"value": "19.83"
}, {
"label": "Day 22",
"value": "21"
}, {
"label": "Day 21",
"value": "20.44"
}, {
"label": "Day 20",
"value": "20.3"
}, {
"label": "Day 19",
"value": "21.63"
}, {
"label": "Day 18",
"value": "23.28"
}, {
"label": "Day 17",
"value": "23.94"
}, {
"label": "Day 16",
"value": "23.48"
}, {
"label": "Day 15",
"value": "22.74"
}, {
"label": "Day 14",
"value": "22.24"
}, {
"label": "Day 13",
"value": "22.42"
}, {
"label": "Day 12",
"value": "22.68"
}, {
"label": "Day 11",
"value": "23.46"
}, {
"label": "Day 10",
"value": "23.6"
}, {
"label": "Day 9",
"value": "24.15"
}, {
"label": "Day 8",
"value": "24.1"
}, {
"label": "Day 7",
"value": "23.47"
}, {
"label": "Day 6",
"value": "23.76"
}, {
"label": "Day 55",
"value": "23.66"
}, {
"label": "Day 5",
"value": "23.79"
}, {
"label": "Day 4",
"value": "23.39"
}, {
"label": "Day 3",
"value": "23.88"
}, {
"label": "Day 2",
"value": "23.01"
}, {
"label": "Yesterday",
"value": "23.32"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>As you can see above, the Kagi chart shows a series of connecting vertical lines. The thickness and direction of the lines are dependent on the price. The line extends until the prices are moving in the same direction. Once the prices reverse by a negative amount, a new Kagi line is drawn in a new column. When prices enter a previous high or low, the thickness of the kagi line changes.
Given below is a brief description of the attributes used to create a Kagi chart:
| Attribute | Description |
|---|---|
|
It is used to specify the label for the data item. The label is rendered on the x-axis. This attribute belongs to the |
|
It is used to specify the numeric value for the data item. This value will be plotted on the chart. This attribute belongs to the |
These charts are independent of time and only change direction once a predefined reversal amount is reached. This reversal value could be configured either as a percentage of range value or absolute value.
Anchors can also be plotted at each data point to show the data points individually. They can be configured to be shown or to be hidden.