Kagi Chart
This chart type belongs to PowerCharts XT.
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.
{
"header": "Chart Anatomy",
"subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart",
"content": {
"header": "Below are different sections with interactive annotated images describing various components and concepts of charts",
"contentGroup": [
{
"itemHeader": "Kagi Chart",
"imgSrc": "kagi-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "40.5%",
"topPosition": "6.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "57%",
"topPosition": "11%",
"annotationLinks": [{
"linkDesc": "Learn how to add sub-caption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "90%",
"topPosition": "15%",
"annotationLinks": [{
"linkDesc": "You can customize border for canvas, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "86%",
"topPosition": "60%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "X-Axis refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "46%",
"topPosition": "76%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "74%",
"topPosition": "71%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "11%",
"topPosition": "14%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "7%",
"topPosition": "44%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.",
"annotationDescLinkPath": null,
"leftPosition": "40%",
"topPosition": "29%",
"annotationLinks": [{
"linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ",
"linkPath": "/chart-guide/chart-configurations/data-plot"
}]
},
{
"annotationNumber": "10",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "49.5%",
"topPosition": "47.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
}
]
}
]
}
}
Let's create a Kagi chart which will show a series of connecting vertical lines. The thickness and direction of the lines will be dependent on the price. The line will extend 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.
To create a Kagi chart, follow the steps given below:
In the JSON data, set the attributes and their corresponding values in
"<attributeName>": "<value>"format.Specify the chart type using the
typeattribute. To render a kagi chart, setkagi.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.Depending on the value passed to the
dataFormatattribute, set thedataSourceattribute(JSON/XML) from where the data will be fetched.Specify the value for a data item using the
valueattribute within thedataobject.
For a detailed list of attributes, refer to the chart attributes page of kagi chart.
A simple Kagi chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Stock Price HRYS",
"subCaption": "Last 2 months",
"numberPrefix": "$",
"xAxisName": "Day",
"yAxisName": "Amount (In USD)",
"labelDisplay": "Rotate",
"reversalPercentage": "5",
"axisLineAlpha": "40",
"rallythickness": "3",
"declinethickness": "3"
},
"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"
}
]
}<chart theme="fusion" caption="Stock Price HRYS" subcaption="Last 2 months" numberprefix="$" xaxisname="Day" yaxisname="Amount (In USD)" labeldisplay="Rotate" reversalpercentage="5" axislinealpha="40" rallythickness="3" declinethickness="3">
<set label="Day 60" value="18.99" />
<set label="Day 59" value="18.82" />
<set label="Day 58" value="18.65" />
<set label="Day 57" value="19.4" />
<set label="Day 56" value="19.92" />
<set label="Day 55" value="20.16" />
<set label="Day 54" value="20.48" />
<set label="Day 53" value="20.15" />
<set label="Day 52" value="20.22" />
<set label="Day 51" value="19.44" />
<set label="Day 50" value="19.22" />
<set label="Day 49" value="19.24" />
<set label="Day 48" value="18.95" />
<set label="Day 47" value="18.97" />
<set label="Day 46" value="18.7" />
<set label="Day 45" value="19.05" />
<set label="Day 44" value="19.33" />
<set label="Day 43" value="18.52" />
<set label="Day 42" value="18.26" />
<set label="Day 41" value="18.51" />
<set label="Day 40" value="18.66" />
<set label="Day 39" value="19.2" />
<set label="Day 38" value="19.33" />
<set label="Day 37" value="19.27" />
<set label="Day 36" value="19.77" />
<set label="Day 35" value="19.88" />
<set label="Day 34" close="19.63" />
<set label="Day 33" value="20.65" />
<set label="Day 32" value="21.33" />
<set label="Day 31" value="20.56" />
<set label="Day 30" value="20.36" />
<set label="Day 29" value="20.03" />
<set label="Day 28" value="19.88" />
<set label="Day 27" value="19.9" />
<set label="Day 26" value="19.5" />
<set label="Day 25" value="19.43" />
<set label="Day 24" value="19.41" />
<set label="Day 23" value="19.83" />
<set label="Day 22" value="21" />
<set label="Day 21" value="20.44" />
<set label="Day 20" value="20.3" />
<set label="Day 19" value="21.63" />
<set label="Day 18" value="23.28" />
<set label="Day 17" value="23.94" />
<set label="Day 16" value="23.48" />
<set label="Day 15" value="22.74" />
<set label="Day 14" value="22.24" />
<set label="Day 13" value="22.42" />
<set label="Day 12" value="22.68" />
<set label="Day 11" value="23.46" />
<set label="Day 10" value="23.6" />
<set label="Day 9" value="24.15" />
<set label="Day 8" value="24.1" />
<set label="Day 7" value="23.47" />
<set label="Day 6" value="23.76" />
<set label="Day 55" value="23.66" />
<set label="Day 5" value="23.79" />
<set label="Day 4" value="23.39" />
<set label="Day 3" value="23.88" />
<set label="Day 2" value="23.01" />
<set label="Yesterday" value="23.32" />
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'kagi',
renderAt: 'chart-container',
width: '680',
height: '390',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Stock Price HRYS",
"subCaption": "Last 2 months",
"numberPrefix": "$",
"xAxisName": "Day",
"yAxisName": "Amount (In USD)",
"labelDisplay": "Rotate",
"reversalPercentage": "5",
"axisLineAlpha": "40",
"rallythickness": "3",
"declinethickness": "3"
},
"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"
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the kagi chart.
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.