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
type
attribute. To render a candlestick chart, setcandlestick
.Set the container object using
renderAt
attribute.Specify the dimension of the chart using
width
andheight
attributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormat
attribute.
In the JSON data:
Set the attributes and their corresponding values in
"<attributeName>": "<value>"
format.Set the
label
attribute to specify the label for the data item. The label is rendered along the x-axis.
Note: This attribute belongs to the
category
object as well as thedata
object. When used in thecategory
object, it specifies the numerical position of a category on the x-axis. When used in thedata
object, it specifies the numerical position of a candlestick point on the x-axis.
Set the
open
attribute to specify the opening price of a data item.Set the
close
attribute to specify the closing price of a data item.Set the
high
attribute to specify the highest price of a data item.Set the
low
attribute to specify the lowest price of a data item.Set the
volume
attribute 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": {
"caption": "Daily Stock Price HRYS",
"subCaption": "Last 2 months",
"numberPrefix": "$",
"vNumberPrefix": " ",
"pYAxisName": "Price",
"vYAxisName": "Volume (In Millions)",
"bgColor": "#ffffff",
"showBorder": "0",
"canvasBgColor": "#ffffff",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1"
},
"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"
}
]
}
]
}
<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 fusioncharts = new FusionCharts({
type: 'candlestick',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Daily Stock Price HRYS",
"subCaption": "Last 2 months",
"numberPrefix": "$",
"vNumberPrefix": " ",
"pYAxisName": "Price",
"vYAxisName": "Volume (In Millions)",
"bgColor": "#ffffff",
"showBorder": "0",
"canvasBgColor": "#ffffff",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
},
"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"
}]
}]
}
}
);
fusioncharts.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
trendSetColor
attribute to set the hex code of the color used to render all trend-sets on the chart.Specify the
trendSetAlpha
attribute to set the transparency for all trend-sets on the chart. This attribute takes values between0
(transparent) and100
(opaque).Specify the
trendSetThickness
attribute to set the thickness for all trend-sets on the chart.Specify the
trendSetDashed
attribute as1
, to set the trend-sets as dashed. The default value of this attribute is0
.Specify the length of the dashed trend-sets using
trendSetDashLen
attribute.trendSetDashGap
attribute 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:
name
attribute sets the name of a trend-set. This attribute belongs to thetrendset
object.Specify the
color
attribute undertrendset
object to set the hex code of the color that will be used to render a specific trend-set.Specify the
alpha
attribute undertrendset
object to set the transparency of a specific trend-set.Specify the
thickness
attribute undertrendset
object to set the thickness of a specific trend-set.Set the
includeInLegend
attribute undertrenset
object 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
dashed
attribute undertrendset
object 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
dashlen
attribute.dashGap
attribute 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.