Japanese Candlestick Chart


The Japanese candlestick chart is a combination of a line chart and a bar chart used primarily to describe price movements of an equity over time, where each bar represents the range of price movement over a given time interval. It is mostly used in technical analysis of equity and currency price patterns.

Candlesticks are usually consist of the body (black or white), an upper and a lower shadow (wick). The wick illustrates the highest and lowest traded prices of a stock, and the body represents the opening and closing trades. If the stock went up, the body is white, with the opening price at the bottom of the body and the closing price at the top. If the stock went down, the body is black, with the opening price at the top and the closing price at the bottom. It's not necessary for a candlestick to have either a body or a wick.

Some traders find candlestick charts easier to read, than Open-High-Low-Close charts.


The candlestick html5 chart uses four values, so we need to pass the opening, the highest, the lowest and the closing price values to the chart. This should be done as setting open, high, low, close parameters into second, third, fourth and fifth columns:

  ["White", 507, 511, 506, 510]


Let's look at the single-series candlestick chart created using an imaginable price ranges that will show candlestick's basic patterns:

Pattern Open High Low Close
White 507 511 506 510
Black 510 511 506 507
Long lower shadow 508.5 511 506 510
Long upper shadow 508.5 511 506 507
Hammer 510 511 506 511
Inverted hammer 507 511 506 506
Spinning top white 508 511 506 509
Spinning top black 509 511 506 508
Doji 508.5 510 507 508.5
Long legged doji 508.5 511 506 508.5
Dragonfly doji 511 511 506 511
Gravestone doji 506 511 506 506
Marubozu white 506 511 506 511
Marubozu black 511 511 506 506

Now we need to convert this data into acceptable format.

  var data = [
    ["White", 507, 511, 506, 510],
    ["Black", 510, 511, 506, 507],
    ["Long lower shadow", 508.5, 511, 506, 510],
    ["Long upper shadow", 508.5, 511, 506, 507],
    ["Hammer", 510, 511, 506, 511],
    ["Inverted hammer", 507, 511, 506,506],
    ["Spinning top white", 508, 511, 506, 509],
    ["Spinning top black", 509, 511, 506, 508],
    ["Doji", 508.5, 510, 507, 508.5],
    ["Long legged doji", 508.5, 511, 506, 508.5],
    ["Dragonfly doji", 511, 511, 506, 511],
    ["Gravestone doji", 506, 511, 506, 506],
    ["Marubozu white", 506, 511, 506, 511],
    ["Marubozu black", 511, 511, 506, 506]

As you can see, we've specified chart as "Candlestick". Each series of data contains column name, open, high, low and close parameters.

Here it is - AnyChart can now visualize your data. Look at the chart sample below and click on it to see it's javascript settings.

JsFiddle Playground


To compare two or more data rows you should use multi-series candlestick charts as it is shown in the sample below.

Let's compare ACME Corp. and Duff Brewing Corp. stock prices sales:

Company ACME Corp. Duff Brewery Corp.
Day Open High Low Close Open High Low Close
28-Aug-07 511.53 514.98 505.79 506.40 522.95 523.10 522.50 522.52
29-Aug-07 507.84 513.30 507.23 512.88 522.60 522.69 522.27 522.55
30-Aug-07 512.36 515.40 510.58 511.40 522.49 522.91 522.38 522.61
31-Aug-07 513.10 516.50 511.47 515.25 522.81 522.83 522.51 522.73
4-Sep-07 515.02 528.00 514.62 525.15 523.30 524.50 523.20 523.97

As we did in single-series sample above, now we need to convert this table into an acceptable format, the only difference between these two samples is the fact that now we have two data sets - one for each year:

    {x: Date.UTC(2007, 7, 28), open:511.53, high:514.98, low:505.79, close:506.40},
    {x: Date.UTC(2007, 7, 29), open:507.84, high:513.30, low:507.23, close:512.88},
    {x: Date.UTC(2007, 7, 30), open:512.36, high:515.40, low:510.58, close:511.40},
    {x: Date.UTC(2007, 7, 31), open:513.10, high:516.50, low:511.47, close:515.25},
    {x: Date.UTC(2007, 8, 4),  open:515.02, high:528.00, low:514.62, close:525.15}

    {x: Date.UTC(2007, 7, 28), open: 522.95, high:523.10, low:522.50, close:522.52},
    {x: Date.UTC(2007, 7, 29), open: 522.60, high:522.69, low:522.27, close:522.55},
    {x: Date.UTC(2007, 7, 30), open: 522.49, high:522.91, low:522.38, close:522.61},
    {x: Date.UTC(2007, 7, 31), open: 522.81, high:522.83, low:522.51, close:522.73},
    {x: Date.UTC(2007, 8, 4),  open: 523.30, high:524.50, low:523.20, close:523.97}

JsFiddle Playground


In AnyChart axis is an object that allows you to configure chart grid, axis line along with tick marks and labels, axis scale and settings and else. In this section we will quickly demonstrate how we can adjust axis orientation, invert axis scale and control minimum and maximum values.


With AnyChart you can place axes to any side of the chart, all you need to do is to adjust orientation with .orientation() parameter of .yAxis() or .xAxis() methods.

  var xAxis = chart.xAxis();
  var yAxis = chart.yAxis();

And this is the demonstration of this feature in the Single-series sample:

JsFiddle Playground

Logarithmic Scale

AnyChart allows to make Y, X or any other scale Logarithmic. This is controlled by scale() method:

  var logScale = anychart.scales.log();

And this is the demonstration of making the Y-Axis Logarithmic in the slightly modified Single-series sample:

JsFiddle Playground

Minimum and Maximum

AnyChart calculates axis minimum and maximum automatically. You can see this on the scale inversion chart sample above: the minimal value of the Y-Axis is 500, and the maximum is 535. You can control these values by setting .maximum() and .minimum() parameters of .yScale() method. As far as you want to adjust the interval of the scale, it's desirable to set .ticks().interval() as well, in case default interval is twisted:

  var yScale = chart.yScale();
  var yTicks = chart.yScale().ticks();

And here is the demonstration of setting the max and the min values in the Single-series sample:

JsFiddle Playground


In this section we will describe main parts of candlestick chart visualization and ways to adjust it. Also you will see list of predefined styles. Visual appearance of candlestick is defined using certain parameters. The most important for candlestick parameters are .fallingStroke(), .risingStroke(), .risingFill() and .fallingFill().

Basic Sample

Now, let's look how to adjust candlestick's appearance:

  var series = chart.candlestick(data);
  series.fallingStroke("black", 1);
  series.risingStroke("black", 1);
  series.hoverFallingStroke("red", 3);
  series.hoverRisingStroke("red", 3);

Using these settings we've set black color for every falling candlestick point and white color for rising ones. Also, every point has black stroke and these stroke goes red if hovered. Thickness of strokes was adjusted too. It's 1 px for all points in normal state and 3px when hovered.

JsFiddle Playground

Labels and Tooltips

In this section we will explain how to add and configure data labels and tooltips.

If you want to configure data labels and tooltips for all series - you should use .labels() and .tooltip() methods. Adding attributes with values to these methods, you can change visual appearance, position and format of the same-named elements.

With the following example let's make data labels appear to the top from the data points, format them to show only the value corresponding to the point and force tooltips to show detailed description.

When formatting data labels' text and tooltips we can use .textFormatter() and .textFormatter().

JsFiddle Playground

Learn more about labels and tooltips in Labels and tooltips Full Keywords reference and formatting guide:Labels and tooltips Full reference of data labels settings can be found in XML Reference, particularly and


AnyChart uses default color palette to colorize data elements of chart automatically if you have not defined special colors.

Colorizing Elements

Now let's study how to apply different colors to different data series. To apply the color to the exact series we usually need to set the .fill() parameter for the series. The Japanese Candlestick series does it another way. As far as this series has two types of points (with rising and falling values) it has two methods for setting series inner color. Use .fallingFill() method to define inner color for all points with falling values and .risingFill() method to define inner color for all points with rising values. In the sample below we use BlueViolet color as .fallingFill() and LightCoral color as .risingFill() (as for borders: use .fallingStroke() method to set border color for all points with falling values and .risingStroke() method for all points with rising values):

JsFiddle Playground

In the sample below we will see how we can colorize individual points. We have chart with one series and predefined color for all elements. We will set "Rgb(180,77,77)" color for minimum point and "Rgb(77,180,77)" for the maximal one. As you see it is very easy to do by setting .fallingFill() and .risingFill() fields of the point.

JsFiddle Playground

Important Note:

AnyChart takes care of visualization and users convenience seriously - that is why we have a number of ways to set colors. For example, instead of "Rgb(180,77,77)" you can set "#b44d4d"- and the color will be the same. Depending on your system/site/application design you may need - and use - any of this color setting methods. But even this is not everything about colors in AnyChart: read more about setting colors below and in the following Help Sections:

Advanced Candlestick Chart Sample - Candlestick, Line and Range Area Combination

Japanese Candlestick Series are rarely used alone, in technical analysis they are often combined with charts of other types, such as Lines (to show moving average), Range Areas (to show "Bollinger bands"), and Column Charts (to show trading volume).

AnyChart javascript charting library provides most of the features which might be necessary in creating a complex financial chart. This includes Combination charts, Dashboards and Interactivity features. The sample below shows a typical stock trading report and it can be used as a starting point in your integration of AnyChart into Financial/Trading/Reporting application.

JsFiddle Playground

You are looking at an outdated 7.10.0 version of this document. Switch to the 8.3.0 version to see the up to date information.