JavaScript Candlestick ChartDisplays Text Message on Data Point

VIEW MORE CANDLESTICK CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
A candlestick chart is a style of financial chart used to describe price movements of a security, derivative, or currency. Each "candlestick" typically shows one day. It is something like a combination of a line chart and a column chart: each column represents four important pieces of information for that day: Opening Value, Closing Value, Highest Value, Lowest Value.

To create a typical candle chart using KoolChart's JavaScript charting library, a <DualChart> element needs to be set in Layout, which contains a <mainChart> element and a <subChart> element. In the <mainChart> element, one of the following three elements can be set: <CandleArea2DChart>, <CandleLine2DChart>, <Candlestick2DChart>.
<DualChart leftGutterSyncEnable="true" rightGutterSyncEnable="true">
<mainChart>
<Candlestick2DChart showDataTips="true" paddingBottom="0" >
...
</Candlestick2DChart>
</mainChart>
<subChart>
<Column2DChart showDataTips="true" height="20%" paddingTop="0" paddingBottom="0" gutterTop="6" gutterBottom="6">
...
</Column2DChart>
</subChart>
</DualChart>
In this JavaScript chart example, a <CandleLine2DSeries> element is set within a <CandleLine2DChart> element, and the htmlJsFunction attribute of the <CandleLine2DSeries> element is set to a JavaScript function name (userFunction) in order to display an alarm message on a particular date.
<CandleLine2DSeries yField="open" baseValue="1280000" htmlJsFunction="userFunction">

function userFunction(id, index, data, values) {
var rollDiv,
xValue = values[0];

if (xValue == "2013/06/19")
rollDiv = getRollDiv(xValue, "Interest rate hikes", "Stock collapse");
else if (xValue == "2013/07/09")
rollDiv = getRollDiv(xValue, "STOCK STIMULUS", "10% Rise");
else if (xValue == "2013/08/05")
rollDiv = getRollDiv(xValue, "Continuous interest rate hikes", "Stock collapse");

if (rollDiv)
return {
content : rollDiv,
className : "roll_wrapper"
};
}

function getRollDiv(date, str1, str2) {
var wrapDiv = document.createElement("div"),
dateDiv = document.createElement("div"),
contentDiv1 = document.createElement("div"),
contentDiv2 = document.createElement("div");

wrapDiv.className = "wrapDiv";

dateDiv.innerHTML = date;
dateDiv.className = "dateDiv";

contentDiv1.innerHTML = str1;
contentDiv1.className = "contentDiv1";

contentDiv2.innerHTML = str2;
contentDiv2.className = "contentDiv2";
wrapDiv.appendChild(dateDiv);
wrapDiv.appendChild(contentDiv1);
wrapDiv.appendChild(contentDiv2);

return wrapDiv;
}