Still have questions?
Contact support
You are looking at an outdated 7.10.0 version of this document. Switch to the 7.14.0 version to see the up to date information.

Open High Low Close (OHLC) Chart

Overview

An open-high-low-close chart (also known as OHLC, HLOC chart) is a type of chart typically used to illustrate movements in the price of a financial instrument over time. Each vertical line on the chart shows the price range (the highest and lowest prices) over one unit of time, e.g. one day or one hour. Tick marks project from each side of the line indicating the opening price (e.g. for a daily bar chart this would be the starting price for that day) on the left, and the closing price for that time period on the right. The bars may be shown in different hues depending on whether prices rose or fell in that period.


The Japanese candlestick chart is another way of displaying market price data, with the opening and closing prices defining a rectangle within the range for each time unit. Both charts show the exact same data, i.e. the opening, high, low, and closing prices during a particular time frame. Some traders find the candlestick chart easier to read.

Chart

OHLC chart uses four values

  {
// position on x scale
x: Date.UTC(2007, 7, 28),
// opening value
open:511.53,
// the highest value
high:514.98,
// the lowest value
low:505.79,
// closing value
close:506.40
  },

Single Series

Let's see single-series OHLC chart created using the following data - ACME Corp. stock price changes through one week:

DayOpenHighLowClose
28-Aug-07511.53514.98505.79506.40
29-Aug-07507.84513.30507.23512.88
30-Aug-07512.36515.40510.58511.40
31-Aug-07513.10516.50511.47515.25
4-Sep-07515.02528.00514.62525.15

Now we need to convert this data table into acceptable format. In terms of AnyChart data model we have one series of data with categories that hold days names. Each point in series represents one day and open, high, low, close prices. Converted Data looks like:

  var data = [
{x: Date.UTC(2007, 8, 28), open:511.53, high:514.98, low:505.79, close:506.40},
{x: Date.UTC(2007, 8, 29), open:507.84, high:513.30, low:507.23, close:512.88},
{x: Date.UTC(2007, 8, 30), open:512.36, high:515.40, low:510.58, close:511.40},
{x: Date.UTC(2007, 8, 31), open:513.10, high:516.50, low:511.47, close:515.25},
{x: Date.UTC(2007, 9, 4), open:515.02, high:528.00, low:514.62, close:525.15}
  ];
  chart = anychart.financial();
  chart.ohlc(data);

As you can see, we've specified chart type as OHLC and set name, open, high, low, close parameters.


Here it is - AnyChart can now visualize your data. Look at the chart sample below and click "Launch in playground" to examine sample's code.

JsFiddle Playground

Multi-series

To compare two or more data rows you have to use multi-series OHLC charts as it shown in the sample below.


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

CompanyACME Corp.Duff Brewery Corp.
DayOpenHighLowCloseOpenHighLowClose
28-Aug-07511.53514.98505.79506.40522.95523.10522.50522.52
29-Aug-07507.84513.30507.23512.88522.60522.69522.27522.55
30-Aug-07512.36515.40510.58511.40522.49522.91522.38522.61
31-Aug-07513.10516.50511.47515.25522.81522.83522.51522.73
4-Sep-07515.02528.00514.62525.15523.30524.50523.20523.97

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

  chart.ohlc([
{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}
  ]);
  
  chart.ohlc([
{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

Axes

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 much more. All axis features are described in Axes Basics tutorial. In this section we will quickly demonstrate how axis orientation can be adjusted, how axis scale can be inverted and how minimum and maximum values can be controlled.

Orientation

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

  var xAxis = chart.xAxis();
  xAxis.orientation("top");
  var yAxis = chart.yAxis();
  yAxis.orientation("right");

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

JsFiddle Playground

Logarithmic Scale

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

  logScale = anychart.scales.log();
  logScale.minimum(0.1);
  logScale.maximum(100);
  chart.yScale(logScale);

And here is the demonstration of Logarithmic Y Axis on slightly modified the Single-series sample:

JsFiddle Playground

Minimum and Maximum

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

  var yScale = chart.yScale();
  yScale.minimum(505);
  yScale.maximum(530);
  var yTicks = chart.yScale().ticks();
  yTicks.interval(5);

And here is the demonstration of maximum and minimum values on the Single-series sample:

JsFiddle Playground

Visualization

In this section we will describe main parts of OHLC chart visualization and ways to adjust it. Visual appearance of OHLC is defined using certain methods and parameters. The most important for OHLC parameters are .fallingStroke() and .risingStroke().

Basic sample

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

  var series = chart.ohlc(data);
  series.fallingStroke("red", 1);
  series.risingStroke("green", 1);
  series.hoverFallingStroke("darkred", 3);
  series.hoverRisingStroke("darkgreen", 3);

Using these settings we've set red color for every falling OHLC point and green color for every rising OHLC point. Also, our rising OHLC points have dark green color, if mouse is over, as well as all falling points have dark red color, if mouse is over. Thickness of strokes was adjusted too. It's 1 px for all points and 3px if mouse over.

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 do that using .labels() and .tooltip() methods. You can tune their visual appearance, positioning and format. Let's do that in the following example: we will make data labels appear to the bottom of the data points, also, we will format labels so they show only the date and tooltip will show detailed description.


When formatting data labels text and tooltip 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

Colors

AnyChart uses default color palette to colorize data elements of chart automatically even if you have not define special colors. But you can apply the color to exact data series or data point.

Colorizing elements

Let's demonstrate how to apply different colors to different data series. As far as this series has two types of points (with rising and falling values) it has two methods for adjusting series color.

To apply the color to the series we need to set .fallingStroke() parameter to define color for all points with falling values and .risingStroke() parameter to define color 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 .fallingStroke() and .risingStroke() parameter for 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 OHLC Chart sample - OHLC, Line and Range Area Combination

In the real world application Open-High-Low-Close 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 provides most of features that developer needs to create 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