Candle Formatting

There are a couple of ways to format the candles in a CandlestickChart widget using style options. There are two parts of the API that give you access to the format of the candles: the seriesStyles and candlestickFormatter options. Additionally, you can change the format when the user hovers the cursor over a candle using the seriesHoverStyles option. These options give you access to each part of the candle.

A good use of candle formatting is to create a condition based on whether the stock price for each candle is rising or falling, and set the color of the body of the candle accordingly. You can see this in action in the How To Conditionally Change Formats topic.

candlestickFormatter

A data point in each type of CandlestickChart is composed of a different set of elements. The elements are represented by obj.eles, and the data for the elements are represented by obj.data. Here is a table of the types and the elements that make them up.

Type	Elements (obj.eles)	Data (obj.data)
candlestick	high The top of the wick line of the candle. low The bottom of the wick line or tail of the candle. openClose The top to bottom of the body of the candle.	high low open close
ohlc	open The horizontal line to the left of the body of the candle. close The horizontal line to the right of the body of the candle. highLow The top to bottom of the body of the candle.	high low open close
hl	highLow The top to bottom of the body of the candle.	high low

Here are code examples with each type of chart.

Use in the wijcandlestickchart script inside the document ready function	Copy Code
candlestickFormatter: function (obj) { var eles = obj.eles, data = obj.data, open = data.open, high = data.high, low = data.low, close = data.close, highEle = eles.high, lowEle = eles.low, openCloseEle = eles.openClose, style = {}; if (open > close) { style.fill = "Red"; style.stroke = style.fill; } else { style.fill = "Green"; style.stroke = style.fill; } openCloseEle.attr(style); }

Use in the wijcandlestickchart script inside the document ready function

Copy Code

candlestickFormatter: function (obj) {
    var eles = obj.eles,
        data = obj.data,
        open = data.open,
        high = data.high,
        low = data.low,
        close = data.close,
        highEle = eles.high,
        lowEle = eles.low,
        openCloseEle = eles.openClose,
        style = {};

    if (open > close) {
        style.fill = "Red";
        style.stroke = style.fill;
    }
    else {
        style.fill = "Green";
        style.stroke = style.fill;
    }
    openCloseEle.attr(style);
}

Use in the wijcandlestickchart script inside the document ready function	Copy Code
candlestickFormatter: function (obj) { var eles = obj.eles, data = obj.data, open = data.open, close = data.close, hlEl = eles.highLow, oEl = eles.open, cEl = eles.close, style = {}; if (open > close) { style.stroke = "rgb(96,189,104)"; } else { style.stroke = "rgb(241,88,84)"; } hlEl.attr(style); oEl.attr(style); cEl.attr(style); }

Use in the wijcandlestickchart script inside the document ready function

Copy Code

candlestickFormatter: function (obj) {
    var eles = obj.eles,
        data = obj.data,
        open = data.open,
        close = data.close,
        hlEl = eles.highLow,
        oEl = eles.open,
        cEl = eles.close,
        style = {};

    if (open > close) {
        style.stroke = "rgb(96,189,104)";
    }
    else {
        style.stroke = "rgb(241,88,84)";
    }
    hlEl.attr(style);
    oEl.attr(style);
    cEl.attr(style);
}

Use in the wijcandlestickchart script inside the document ready function	Copy Code
candlestickFormatter: function (obj) { var eles = obj.eles, data = obj.data, high = data.high, low = data.low, hlEle = eles.highLow, style = {}; if (high - low > 5) { style.stroke = "rgb(96,189,104)"; } else { style.stroke = "rgb(241,88,84)"; } hlEle.attr(style); }

Use in the wijcandlestickchart script inside the document ready function

Copy Code

candlestickFormatter: function (obj) {
    var eles = obj.eles,
        data = obj.data,
        high = data.high,
        low = data.low,
        hlEle = eles.highLow,
        style = {};

    if (high - low > 5) {
        style.stroke = "rgb(96,189,104)";
    }
    else {
        style.stroke = "rgb(241,88,84)";
    }
    hlEle.attr(style);
}

seriesStyles and seriesHoverStyles

For each series in the chart, you can use a different set of seriesStyles and seriesHoverStyles. Here are the available styles for each chart type.

Type	Style Names
candlestick	highLow The style to use on the top to bottom wick line, or wick and tail, of the candle. fallingClose The style to use for the body of the candle when the closing value is lower than the opening value. risingClose The style to use for the body of the candle when the closing value is higher than the opening value. unchangeClose The style to use for the body of the candle when the closing value is the same as the opening value.
ohlc	open The style to use for the horizontal line to the left of the body of the candle. close The style to use for the horizontal line to the right of the body of the candle. highLow The style to use for the body of the candle.
hl	highLow The style to use for the body of the candle.

Here are code examples with each type of chart.

Use in the wijcandlestickchart script inside the document ready function	Copy Code
seriesStyles: [{ highLow: {fill: "Gray"}, fallingClose: {fill: "Red"}, risingClose: {fill: "Green"}, unchangeClose: {fill: "Yellow"} }]

Use in the wijcandlestickchart script inside the document ready function	Copy Code
seriesStyles: [{ open: {}, close: {}, highLow: {fill: "#88bde6"} }]

Use in the wijcandlestickchart script inside the document ready function	Copy Code
seriesStyles: [{ highLow: {fill: "#88bde6"} }]

candlestickFormatter

seriesStyles and seriesHoverStyles

How To

Widgets

Reference