Candlestick Chart
This chart type belongs to PowerCharts XT.
A candlestick chart is widely used for applications that require analysis of equity and commodity prices. It allows you to show the opening price, closing price, highest trading price, lowest trading price, and the trade volume on a single chart. A combination of the line and bar charts, a candlestick chart represents the range of price movement for a specific time interval.
The FusionCharts Suite XT candlestick chart offers you a powerful and interactive interface to plot your stock data. It offers the following features:
Integrated price and volume plot, where the volume plot can be turned on or off.
Multiple chart options for price plotting - candlestick/bar/line.
Interactive tooltip and customizable hover bar.
Option to plot trend lines and zones on the chart.
Option to plot any number of custom trend sets on the chart, which can be customized to show technical indicators.
Ability to provide missing data.
Ability to highlight specific candles.
Option to draw vertical indicator lines at any point on the x-axis.
Create a Candlestick Chart
As an example, we will create a candlestick chart that shows the daily stock price for Harry's SuperMart (stock name HRYS) for the last two months.
To create a candlestick chart follow the steps given below:
Specify the chart type using the
typeattribute. To render a candlestick chart, setcandlestick.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.
In the JSON data:
Set the attributes and their corresponding values in
"<attributeName>": "<value>"format.Set the
labelattribute to specify the label for the data item. The label is rendered along the x-axis.
Note: This attribute belongs to the
categoryobject as well as thedataobject. When used in thecategoryobject, it specifies the numerical position of a category on the x-axis. When used in thedataobject, it specifies the numerical position of a candlestick point on the x-axis.
Set the
openattribute to specify the opening price of a data item.Set the
closeattribute to specify the closing price of a data item.Set the
highattribute to specify the highest price of a data item.Set the
lowattribute to specify the lowest price of a data item.Set the
volumeattribute to specify the volume of the transaction. To render the volume chart, specify the value to this attribute.
For a detailed list of attributes, refer to the chart attributes page of candlestick chart.
Refer to the code below:
{
"chart": {
...
},
"categories": [
{
"category": [...]
}
],
"dataset": [
{
"data": [
{
"open": "18.74",
"high": "19.16",
"low": "18.67 ",
"close": "18.99",
"x": "1",
"volume": "4991285"
},
{
"open": "23.97",
"high": "23.99",
"low": "23.14",
"close": "23.32",
"x": "61",
"volume": "4879546"
}
]
}
]
}The candlestick chart thus created will look like:
{
"chart": {
"theme": "fusion",
"caption": "Daily Stock Price HRYS",
"subCaption": "Last 2 months",
"numberprefix": "$",
"vNumberPrefix": " ",
"pyaxisname": "Price",
"vyaxisname": "Volume (In Millions)",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"categories": [
{
"category": [
{
"label": "2 month ago",
"x": "1"
},
{
"label": "1 month ago",
"x": "31"
},
{
"label": "Today",
"x": "60"
}
]
}
],
"dataset": [
{
"data": [
{
"open": "18.74",
"high": "19.16",
"low": "18.67 ",
"close": "18.99",
"x": "1",
"volume": "4991285"
},
{
"open": "18.74",
"high": "19.06",
"low": "18.54",
"close": "18.82",
"x": "2",
"volume": "3615889"
},
{
"open": "19.21",
"high": "19.3",
"low": "18.59 ",
"close": "18.65",
"x": "3",
"volume": "4749586"
},
{
"open": "19.85",
"high": "19.86",
"low": "19.12",
"close": "19.4",
"x": "4",
"volume": "4366740"
},
{
"open": "20.19",
"high": "20.21",
"low": "19.57",
"close": "19.92",
"x": "5",
"volume": "3982709"
},
{
"open": "20.47",
"high": "20.64",
"low": "20.15",
"close": "20.16",
"x": "6",
"volume": "2289403"
},
{
"open": "20.36",
"high": "20.52",
"low": "20.29",
"close": "20.48",
"x": "7",
"volume": "1950919"
},
{
"open": "20.21",
"high": "20.25",
"low": "19.91",
"close": "20.15",
"x": "8",
"volume": "2391070"
},
{
"open": "19.46",
"high": "20.54",
"low": "19.46",
"close": "20.22",
"x": "9",
"volume": "4548422"
},
{
"open": "19.24",
"high": "19.5",
"low": "19.13",
"close": "19.44",
"x": "10",
"volume": "1889811"
},
{
"open": "19.25",
"high": "19.41",
"low": "18.99",
"close": "19.22",
"x": "11",
"volume": "2543355"
},
{
"open": "18.85",
"high": "19.45",
"low": "18.8",
"close": "19.24",
"x": "12",
"volume": "2134393"
},
{
"open": "18.97",
"high": "19.01",
"low": "18.68",
"close": "18.95",
"x": "13",
"volume": "1740852"
},
{
"open": "18.69",
"high": "19",
"low": "18.35",
"close": "18.97",
"x": "14",
"volume": "2701392"
},
{
"open": "19.02",
"high": "19.1",
"low": "18.68",
"close": "18.7",
"x": "15",
"volume": "2198755"
},
{
"open": "19.29",
"high": "19.38",
"low": "18.88",
"close": "19.05",
"x": "16",
"volume": "2464958"
},
{
"open": "18.64",
"high": "19.35",
"low": "18.53",
"close": "19.33",
"x": "17",
"volume": "2962994"
},
{
"open": "18.14",
"high": "18.58",
"low": "18.08",
"close": "18.52",
"x": "18",
"volume": "1964932"
},
{
"open": "18.49",
"high": "18.92",
"low": "18.19",
"close": "18.26",
"x": "19",
"volume": "3013102"
},
{
"open": "18.71",
"high": "18.84",
"low": "18",
"close": "18.51",
"x": "20",
"volume": "4435894"
},
{
"open": "19.17",
"high": "19.35",
"low": "18.61",
"close": "18.66",
"x": "21",
"volume": "3245851"
},
{
"open": "19.12",
"high": "19.41",
"low": "18.92",
"close": "19.2",
"x": "22",
"volume": "2259792"
},
{
"open": "19.43",
"high": "19.58",
"low": "19.16",
"close": "19.33",
"x": "23",
"volume": "3531327"
},
{
"open": "19.72",
"high": "19.81",
"low": "19.04",
"close": "19.27",
"x": "24",
"volume": "5834733"
},
{
"open": "19.7",
"high": "19.94",
"low": "19.49",
"close": "19.77",
"x": "25",
"volume": "2009987"
},
{
"open": "19.84",
"high": "19.98",
"low": "19.39",
"close": "19.88",
"x": "26",
"volume": "2767592"
},
{
"open": "20.71",
"high": "20.73",
"low": "19.16",
"close": "19.63",
"x": "27",
"volume": "673358"
},
{
"open": "21.14",
"high": "21.14",
"low": "20.55",
"close": "20.65",
"x": "28",
"volume": "3164006"
},
{
"open": "21.5",
"high": "21.86",
"low": "21.2",
"close": "21.33",
"x": "29",
"volume": "7986466"
},
{
"open": "20.45",
"high": "21.08",
"low": "20.1",
"close": "20.56",
"x": "30",
"volume": "5813040"
},
{
"open": "20.07",
"high": "20.69",
"low": "20.04",
"close": "20.36",
"x": "31",
"volume": "3440002"
},
{
"open": "19.88",
"high": "20.11",
"low": "19.51",
"close": "20.03",
"x": "32",
"volume": "2779171"
},
{
"open": "19.76",
"high": "20.13",
"low": "19.65",
"close": "19.88",
"x": "33",
"volume": "2918115"
},
{
"open": "19.77",
"high": "19.97",
"low": "19.27",
"close": "19.9",
"x": "34",
"volume": "3850357"
},
{
"open": "19.43",
"high": "19.72",
"low": "18.88",
"close": "19.5",
"x": "35",
"volume": "5047378"
},
{
"open": "19.69",
"high": "19.84",
"low": "19.17",
"close": "19.43",
"x": "36",
"volume": "3479017"
},
{
"open": "19.59",
"high": "20.02",
"low": "19.02",
"close": "19.41",
"x": "37",
"volume": "5749874"
},
{
"open": "20.95",
"high": "21.09",
"low": "19.64",
"close": "19.83",
"x": "38",
"volume": "6319111"
},
{
"open": "20.52",
"high": "21.03",
"low": "20.45",
"close": "21",
"x": "39",
"volume": "4412413"
},
{
"open": "20.36",
"high": "20.96",
"low": "20.2",
"close": "20.44",
"x": "40",
"volume": "5948318"
},
{
"open": "21.45",
"high": "21.48",
"low": "19.63",
"close": "20.3",
"x": "41",
"volume": "11935440"
},
{
"open": "23.49",
"high": "23.57",
"low": "21.12",
"close": "21.63",
"x": "42",
"volume": "10523910"
},
{
"open": "24.04",
"high": "24.21",
"low": "23.04",
"close": "23.28",
"x": "43",
"volume": "3843797"
},
{
"open": "23.6",
"high": "24.065",
"low": "23.51",
"close": "23.94",
"x": "44",
"volume": "3691404"
},
{
"open": "22.87",
"high": "23.49",
"low": "22.86",
"close": "23.48",
"x": "45",
"volume": "3387393"
},
{
"open": "22.35",
"high": "22.89",
"low": "22.35",
"close": "22.74",
"x": "46",
"volume": "3737330"
},
{
"open": "22.11",
"high": "22.5",
"low": "21.9",
"close": "22.24",
"x": "47",
"volume": "4630397"
},
{
"open": "22.58",
"high": "22.80",
"low": "22.25",
"close": "22.42",
"x": "48",
"volume": "3024711"
},
{
"open": "23.54",
"high": "23.76",
"low": "22.6",
"close": "22.68",
"x": "49",
"volume": "3984508"
},
{
"open": "23.66",
"high": "24.09",
"low": "23.09",
"close": "23.46",
"x": "50",
"volume": "3420204"
},
{
"open": "24.36",
"high": "24.42",
"low": "22.90",
"close": "23.6",
"x": "51",
"volume": "5151096"
},
{
"open": "24.34",
"high": "24.6",
"low": "23.73",
"close": "24.15",
"x": "52",
"volume": "5999654"
},
{
"open": "23.38",
"high": "24.8",
"low": "23.36",
"close": "24.1",
"x": "53",
"volume": "5382049"
},
{
"open": "23.76",
"high": "23.84",
"low": "23.23",
"close": "23.47",
"x": "54",
"volume": "3508510"
},
{
"open": "23.64",
"high": "23.94",
"low": "23.48",
"close": "23.76",
"x": "55",
"volume": "2718428"
},
{
"open": "23.99",
"high": "24.18",
"low": "23.59",
"close": "23.66",
"x": "56",
"volume": "2859391"
},
{
"open": "23.32",
"high": "24.26",
"low": "23.32",
"close": "23.79",
"x": "57",
"volume": "4138618"
},
{
"open": "24.08",
"high": "24.4",
"low": "23.26",
"close": "23.39",
"x": "58",
"volume": "4477478"
},
{
"open": "22.84",
"high": "23.96",
"low": "22.83",
"close": "23.88",
"x": "59",
"volume": "4822378"
},
{
"open": "23.38",
"high": "23.78",
"low": "22.94",
"close": "23.01",
"x": "60",
"volume": "4037312"
},
{
"open": "23.97",
"high": "23.99",
"low": "23.14",
"close": "23.32",
"x": "61",
"volume": "4879546"
}
]
}
]
}<chart theme="fusion" caption="Daily Stock Price HRYS" subcaption="Last 2 months" numberprefix="$" vnumberprefix=" " pyaxisname="Price" vyaxisname="Volume (In Millions)" tooltipcolor="#ffffff" tooltipborderthickness="0" tooltipbgcolor="#000000" tooltipbgalpha="80" tooltipborderradius="2" tooltippadding="5">
<categories>
<category label="2 month ago" x="1" />
<category label="1 month ago" x="31" />
<category label="Today" x="60" />
</categories>
<dataset>
<set open="18.74" high="19.16" low="18.67 " close="18.99" x="1" volume="4991285" />
<set open="18.74" high="19.06" low="18.54" close="18.82" x="2" volume="3615889" />
<set open="19.21" high="19.3" low="18.59 " close="18.65" x="3" volume="4749586" />
<set open="19.85" high="19.86" low="19.12" close="19.4" x="4" volume="4366740" />
<set open="20.19" high="20.21" low="19.57" close="19.92" x="5" volume="3982709" />
<set open="20.47" high="20.64" low="20.15" close="20.16" x="6" volume="2289403" />
<set open="20.36" high="20.52" low="20.29" close="20.48" x="7" volume="1950919" />
<set open="20.21" high="20.25" low="19.91" close="20.15" x="8" volume="2391070" />
<set open="19.46" high="20.54" low="19.46" close="20.22" x="9" volume="4548422" />
<set open="19.24" high="19.5" low="19.13" close="19.44" x="10" volume="1889811" />
<set open="19.25" high="19.41" low="18.99" close="19.22" x="11" volume="2543355" />
<set open="18.85" high="19.45" low="18.8" close="19.24" x="12" volume="2134393" />
<set open="18.97" high="19.01" low="18.68" close="18.95" x="13" volume="1740852" />
<set open="18.69" high="19" low="18.35" close="18.97" x="14" volume="2701392" />
<set open="19.02" high="19.1" low="18.68" close="18.7" x="15" volume="2198755" />
<set open="19.29" high="19.38" low="18.88" close="19.05" x="16" volume="2464958" />
<set open="18.64" high="19.35" low="18.53" close="19.33" x="17" volume="2962994" />
<set open="18.14" high="18.58" low="18.08" close="18.52" x="18" volume="1964932" />
<set open="18.49" high="18.92" low="18.19" close="18.26" x="19" volume="3013102" />
<set open="18.71" high="18.84" low="18" close="18.51" x="20" volume="4435894" />
<set open="19.17" high="19.35" low="18.61" close="18.66" x="21" volume="3245851" />
<set open="19.12" high="19.41" low="18.92" close="19.2" x="22" volume="2259792" />
<set open="19.43" high="19.58" low="19.16" close="19.33" x="23" volume="3531327" />
<set open="19.72" high="19.81" low="19.04" close="19.27" x="24" volume="5834733" />
<set open="19.7" high="19.94" low="19.49" close="19.77" x="25" volume="2009987" />
<set open="19.84" high="19.98" low="19.39" close="19.88" x="26" volume="2767592" />
<set open="20.71" high="20.73" low="19.16" close="19.63" x="27" volume="673358" />
<set open="21.14" high="21.14" low="20.55" close="20.65" x="28" volume="3164006" />
<set open="21.5" high="21.86" low="21.2" close="21.33" x="29" volume="7986466" />
<set open="20.45" high="21.08" low="20.1" close="20.56" x="30" volume="5813040" />
<set open="20.07" high="20.69" low="20.04" close="20.36" x="31" volume="3440002" />
<set open="19.88" high="20.11" low="19.51" close="20.03" x="32" volume="2779171" />
<set open="19.76" high="20.13" low="19.65" close="19.88" x="33" volume="2918115" />
<set open="19.77" high="19.97" low="19.27" close="19.9" x="34" volume="3850357" />
<set open="19.43" high="19.72" low="18.88" close="19.5" x="35" volume="5047378" />
<set open="19.69" high="19.84" low="19.17" close="19.43" x="36" volume="3479017" />
<set open="19.59" high="20.02" low="19.02" close="19.41" x="37" volume="5749874" />
<set open="20.95" high="21.09" low="19.64" close="19.83" x="38" volume="6319111" />
<set open="20.52" high="21.03" low="20.45" close="21" x="39" volume="4412413" />
<set open="20.36" high="20.96" low="20.2" close="20.44" x="40" volume="5948318" />
<set open="21.45" high="21.48" low="19.63" close="20.3" x="41" volume="11935440" />
<set open="23.49" high="23.57" low="21.12" close="21.63" x="42" volume="10523910" />
<set open="24.04" high="24.21" low="23.04" close="23.28" x="43" volume="3843797" />
<set open="23.6" high="24.065" low="23.51" close="23.94" x="44" volume="3691404" />
<set open="22.87" high="23.49" low="22.86" close="23.48" x="45" volume="3387393" />
<set open="22.35" high="22.89" low="22.35" close="22.74" x="46" volume="3737330" />
<set open="22.11" high="22.5" low="21.9" close="22.24" x="47" volume="4630397" />
<set open="22.58" high="22.80" low="22.25" close="22.42" x="48" volume="3024711" />
<set open="23.54" high="23.76" low="22.6" close="22.68" x="49" volume="3984508" />
<set open="23.66" high="24.09" low="23.09" close="23.46" x="50" volume="3420204" />
<set open="24.36" high="24.42" low="22.90" close="23.6" x="51" volume="5151096" />
<set open="24.34" high="24.6" low="23.73" close="24.15" x="52" volume="5999654" />
<set open="23.38" high="24.8" low="23.36" close="24.1" x="53" volume="5382049" />
<set open="23.76" high="23.84" low="23.23" close="23.47" x="54" volume="3508510" />
<set open="23.64" high="23.94" low="23.48" close="23.76" x="55" volume="2718428" />
<set open="23.99" high="24.18" low="23.59" close="23.66" x="56" volume="2859391" />
<set open="23.32" high="24.26" low="23.32" close="23.79" x="57" volume="4138618" />
<set open="24.08" high="24.4" low="23.26" close="23.39" x="58" volume="4477478" />
<set open="22.84" high="23.96" low="22.83" close="23.88" x="59" volume="4822378" />
<set open="23.38" high="23.78" low="22.94" close="23.01" x="60" volume="4037312" />
<set open="23.97" high="23.99" low="23.14" close="23.32" x="61" volume="4879546" />
</dataset>
</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: 'candlestick',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Daily Stock Price HRYS",
"subCaption": "Last 2 months",
"numberprefix": "$",
"vNumberPrefix": " ",
"pyaxisname": "Price",
"vyaxisname": "Volume (In Millions)",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"categories": [{
"category": [{
"label": "2 month ago",
"x": "1"
}, {
"label": "1 month ago",
"x": "31"
}, {
"label": "Today",
"x": "60"
}]
}],
"dataset": [{
"data": [{
"open": "18.74",
"high": "19.16",
"low": "18.67 ",
"close": "18.99",
"x": "1",
"volume": "4991285"
}, {
"open": "18.74",
"high": "19.06",
"low": "18.54",
"close": "18.82",
"x": "2",
"volume": "3615889"
}, {
"open": "19.21",
"high": "19.3",
"low": "18.59 ",
"close": "18.65",
"x": "3",
"volume": "4749586"
}, {
"open": "19.85",
"high": "19.86",
"low": "19.12",
"close": "19.4",
"x": "4",
"volume": "4366740"
}, {
"open": "20.19",
"high": "20.21",
"low": "19.57",
"close": "19.92",
"x": "5",
"volume": "3982709"
}, {
"open": "20.47",
"high": "20.64",
"low": "20.15",
"close": "20.16",
"x": "6",
"volume": "2289403"
}, {
"open": "20.36",
"high": "20.52",
"low": "20.29",
"close": "20.48",
"x": "7",
"volume": "1950919"
}, {
"open": "20.21",
"high": "20.25",
"low": "19.91",
"close": "20.15",
"x": "8",
"volume": "2391070"
}, {
"open": "19.46",
"high": "20.54",
"low": "19.46",
"close": "20.22",
"x": "9",
"volume": "4548422"
}, {
"open": "19.24",
"high": "19.5",
"low": "19.13",
"close": "19.44",
"x": "10",
"volume": "1889811"
}, {
"open": "19.25",
"high": "19.41",
"low": "18.99",
"close": "19.22",
"x": "11",
"volume": "2543355"
}, {
"open": "18.85",
"high": "19.45",
"low": "18.8",
"close": "19.24",
"x": "12",
"volume": "2134393"
}, {
"open": "18.97",
"high": "19.01",
"low": "18.68",
"close": "18.95",
"x": "13",
"volume": "1740852"
}, {
"open": "18.69",
"high": "19",
"low": "18.35",
"close": "18.97",
"x": "14",
"volume": "2701392"
}, {
"open": "19.02",
"high": "19.1",
"low": "18.68",
"close": "18.7",
"x": "15",
"volume": "2198755"
}, {
"open": "19.29",
"high": "19.38",
"low": "18.88",
"close": "19.05",
"x": "16",
"volume": "2464958"
}, {
"open": "18.64",
"high": "19.35",
"low": "18.53",
"close": "19.33",
"x": "17",
"volume": "2962994"
}, {
"open": "18.14",
"high": "18.58",
"low": "18.08",
"close": "18.52",
"x": "18",
"volume": "1964932"
}, {
"open": "18.49",
"high": "18.92",
"low": "18.19",
"close": "18.26",
"x": "19",
"volume": "3013102"
}, {
"open": "18.71",
"high": "18.84",
"low": "18",
"close": "18.51",
"x": "20",
"volume": "4435894"
}, {
"open": "19.17",
"high": "19.35",
"low": "18.61",
"close": "18.66",
"x": "21",
"volume": "3245851"
}, {
"open": "19.12",
"high": "19.41",
"low": "18.92",
"close": "19.2",
"x": "22",
"volume": "2259792"
}, {
"open": "19.43",
"high": "19.58",
"low": "19.16",
"close": "19.33",
"x": "23",
"volume": "3531327"
}, {
"open": "19.72",
"high": "19.81",
"low": "19.04",
"close": "19.27",
"x": "24",
"volume": "5834733"
}, {
"open": "19.7",
"high": "19.94",
"low": "19.49",
"close": "19.77",
"x": "25",
"volume": "2009987"
}, {
"open": "19.84",
"high": "19.98",
"low": "19.39",
"close": "19.88",
"x": "26",
"volume": "2767592"
}, {
"open": "20.71",
"high": "20.73",
"low": "19.16",
"close": "19.63",
"x": "27",
"volume": "673358"
}, {
"open": "21.14",
"high": "21.14",
"low": "20.55",
"close": "20.65",
"x": "28",
"volume": "3164006"
}, {
"open": "21.5",
"high": "21.86",
"low": "21.2",
"close": "21.33",
"x": "29",
"volume": "7986466"
}, {
"open": "20.45",
"high": "21.08",
"low": "20.1",
"close": "20.56",
"x": "30",
"volume": "5813040"
}, {
"open": "20.07",
"high": "20.69",
"low": "20.04",
"close": "20.36",
"x": "31",
"volume": "3440002"
}, {
"open": "19.88",
"high": "20.11",
"low": "19.51",
"close": "20.03",
"x": "32",
"volume": "2779171"
}, {
"open": "19.76",
"high": "20.13",
"low": "19.65",
"close": "19.88",
"x": "33",
"volume": "2918115"
}, {
"open": "19.77",
"high": "19.97",
"low": "19.27",
"close": "19.9",
"x": "34",
"volume": "3850357"
}, {
"open": "19.43",
"high": "19.72",
"low": "18.88",
"close": "19.5",
"x": "35",
"volume": "5047378"
}, {
"open": "19.69",
"high": "19.84",
"low": "19.17",
"close": "19.43",
"x": "36",
"volume": "3479017"
}, {
"open": "19.59",
"high": "20.02",
"low": "19.02",
"close": "19.41",
"x": "37",
"volume": "5749874"
}, {
"open": "20.95",
"high": "21.09",
"low": "19.64",
"close": "19.83",
"x": "38",
"volume": "6319111"
}, {
"open": "20.52",
"high": "21.03",
"low": "20.45",
"close": "21",
"x": "39",
"volume": "4412413"
}, {
"open": "20.36",
"high": "20.96",
"low": "20.2",
"close": "20.44",
"x": "40",
"volume": "5948318"
}, {
"open": "21.45",
"high": "21.48",
"low": "19.63",
"close": "20.3",
"x": "41",
"volume": "11935440"
}, {
"open": "23.49",
"high": "23.57",
"low": "21.12",
"close": "21.63",
"x": "42",
"volume": "10523910"
}, {
"open": "24.04",
"high": "24.21",
"low": "23.04",
"close": "23.28",
"x": "43",
"volume": "3843797"
}, {
"open": "23.6",
"high": "24.065",
"low": "23.51",
"close": "23.94",
"x": "44",
"volume": "3691404"
}, {
"open": "22.87",
"high": "23.49",
"low": "22.86",
"close": "23.48",
"x": "45",
"volume": "3387393"
}, {
"open": "22.35",
"high": "22.89",
"low": "22.35",
"close": "22.74",
"x": "46",
"volume": "3737330"
}, {
"open": "22.11",
"high": "22.5",
"low": "21.9",
"close": "22.24",
"x": "47",
"volume": "4630397"
}, {
"open": "22.58",
"high": "22.80",
"low": "22.25",
"close": "22.42",
"x": "48",
"volume": "3024711"
}, {
"open": "23.54",
"high": "23.76",
"low": "22.6",
"close": "22.68",
"x": "49",
"volume": "3984508"
}, {
"open": "23.66",
"high": "24.09",
"low": "23.09",
"close": "23.46",
"x": "50",
"volume": "3420204"
}, {
"open": "24.36",
"high": "24.42",
"low": "22.90",
"close": "23.6",
"x": "51",
"volume": "5151096"
}, {
"open": "24.34",
"high": "24.6",
"low": "23.73",
"close": "24.15",
"x": "52",
"volume": "5999654"
}, {
"open": "23.38",
"high": "24.8",
"low": "23.36",
"close": "24.1",
"x": "53",
"volume": "5382049"
}, {
"open": "23.76",
"high": "23.84",
"low": "23.23",
"close": "23.47",
"x": "54",
"volume": "3508510"
}, {
"open": "23.64",
"high": "23.94",
"low": "23.48",
"close": "23.76",
"x": "55",
"volume": "2718428"
}, {
"open": "23.99",
"high": "24.18",
"low": "23.59",
"close": "23.66",
"x": "56",
"volume": "2859391"
}, {
"open": "23.32",
"high": "24.26",
"low": "23.32",
"close": "23.79",
"x": "57",
"volume": "4138618"
}, {
"open": "24.08",
"high": "24.4",
"low": "23.26",
"close": "23.39",
"x": "58",
"volume": "4477478"
}, {
"open": "22.84",
"high": "23.96",
"low": "22.83",
"close": "23.88",
"x": "59",
"volume": "4822378"
}, {
"open": "23.38",
"high": "23.78",
"low": "22.94",
"close": "23.01",
"x": "60",
"volume": "4037312"
}, {
"open": "23.97",
"high": "23.99",
"low": "23.14",
"close": "23.32",
"x": "61",
"volume": "4879546"
}]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the candlestick chart.
In the chart above, the price chart is rendered in the first half of the candlestick chart while the volume chart is rendered in the second half.
A candlestick chart is widely used for applications that require analysis of equity and commodity prices. It allows you to show the opening price, closing price, highest trading price, lowest trading price, and the trade volume on a single chart.
Candlestick chart has both x-axis and y-axis as numeric. This chart does not directly accept dates for the data and category labels. Instead, it accepts an x-value for each data. This allows for greater flexibility as you can plot days, hours, weeks, months, years, etc. using this chart.
Converting your dates into x-values is very simple. Using your server side script, select the first date in your chart as base date. Now, use date difference function (with respect to this base date) to get the x-values for each date. So, if you want to show daily quotes on the chart, you can use "day" as the date difference parameter. Similarly, if you want to show weekly quotes, you can use "weeks" as the date difference parameter and so on.
Now, let's customize the appearance and properties of the charts.
Set a chart type for the Price chart
You can render the price chart using a candle chart, a bar chart, or a line chart. To render the price chart as per your requirement, set plotPriceAs attribute as candlestick, bar or line.
Refer to the code given below:
{
"chart": {
"plotPriceAs" : "line"
}
}A candlestick chart with the price chart rendered as a line chart looks like this:
Click here to edit the candlestick chart.
Set the Price to Plot for the Line Price chart
For a price chart rendered as a line chart, you can decide whether you want to plot the chart w.r.t. the opening price or the closing price, using the plotClosingPrice attribute.
As discussed before, high and low price values are not required for the line chart.
Refer to the code given below:
{
"chart": {
"plotClosingPrice" : "0"
}
}A candlestick chart looks like:
Click here to edit the candlestick chart.
Show/Hide the Volume chart
The volume chart in a candlestick chart can be set as hidden by specifying the showVolumeChart attribute as 0. The default value for this attribute is 1.
Refer to the code given below:
{
"chart": {
"showVolumeChart" : "0"
}
}A candlestick chart rendered with the volume chart hidden looks like this:
Click here to edit the candlestick chart.
You can also customize the height of the volume chart by volumeHeightPercent attribute. The default value is 40% and you can choose any value between 20% to 80%.
Configure Trend-Sets and Trend-Lines
Trend-Sets
For a candlestick chart, you can plot overlay lines on the existing data plots. These lines, known as trend-sets, can be effectively used to show technical indicators.
To add cosmetics to the trend-sets, take a look at the following attributes and their usage:
Specify the
trendSetColorattribute to set the hex code of the color used to render all trend-sets on the chart.Specify the
trendSetAlphaattribute to set the transparency for all trend-sets on the chart. This attribute takes values between0(transparent) and100(opaque).Specify the
trendSetThicknessattribute to set the thickness for all trend-sets on the chart.Specify the
trendSetDashedattribute as1, to set the trend-sets as dashed. The default value of this attribute is0.Specify the length of the dashed trend-sets using
trendSetDashLenattribute.trendSetDashGapattribute sets the gap between each dash, if the trend-sets are rendered as dashed.
Refer to the code given below:
{
"chart": {
"trendSetColor" : "0",
"trendSetAlpha" : "0",
"trendSetThickness" : "0",
"trendSetDashed" : "0",
"trendSetDashLen" : "0",
"trendSetDashGap" : "0"
}
}To customize a specific trend-set, follow the steps given below:
nameattribute sets the name of a trend-set. This attribute belongs to thetrendsetobject.Specify the
colorattribute undertrendsetobject to set the hex code of the color that will be used to render a specific trend-set.Specify the
alphaattribute undertrendsetobject to set the transparency of a specific trend-set.Specify the
thicknessattribute undertrendsetobject to set the thickness of a specific trend-set.Set the
includeInLegendattribute undertrensetobject to specify whether the name of a trend-set will be included in the legend. Setting this attribute to 0 will not show the trend-set in the legend, whereas the default value for this attribute is1.Specify the
dashedattribute undertrendsetobject as1, to set the trend-sets as dashed for a particular trend-set. The default value of this attribute is0.Specify the length of the dashed for a particular trend-sets using
dashlenattribute.dashGapattribute sets the gap between each dash for a particular trend-set, if the trend-sets are rendered as dashed.
Refer to the code below:
{
"chart": {
...
},
"data": [],
"trendset": [{
"name": "High trends",
"color": "#0000CC",
"alpha": "1",
"thickness": "1",
"includeInLegend": "1",
"dashed": "1",
"dashlen": "3",
"dashGap": "4"
}]
}A candlestick chart rendered with a trend-set looks like this:
Click here to edit the candlestick chart.
Each individual object in the set object under trendset can have two attributes: x and value. x represents the x-axis index where this value should be plotted.