OHLC Series

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.

to top

Adding OHLC Series

Data-Provider

Before you can add OHLC series to the chart you need to prepare Data Provider. You need four fields to create OHLC chart: open, high, low and close. So the Data Provider should contain all these four fields.

Sample XML for OHLC Data Provider:

XML/JSON Syntax
Plain code
01 <data_provider data_set="dataSet1" id="dp1">
02   <fields>
03     <field type="Open" column="1" approximation_type="Open" />
04     <field type="High" column="2" approximation_type="High" />
05     <field type="Low" column="3" approximation_type="Low" />
06     <field type="Close" column="4" approximation_type="Close" />
07   </fields>
08 </data_provider>
01{
02  dataSet: "dataSet1",
03  id: "dp1",
04  fields: [
05    {
06      type: "Open",
07      column: 1,
08      approximationType: "Open"
09    },
10    {
11      type: "High",
12      column: 2,
13      approximationType: "High"
14    },
15    {
16      type: "Low",
17      column: 3,
18      approximationType: "Low"
19    },
20    {
21      type: "Close",
22      column: 4,
23      approximationType: "Close"
24    }
25  ]
26}

As you can see four fields are defined open, high, low and close. Now you can declare series that will use this Data Provider.

to top

Series Declaration

XML syntax to declare series with Data Provider shown above:

XML/JSON Syntax
Plain code
01 <chart>
02   <series_list>
03     <series type="Candlestick" data_provider="dp1" color="#005ECB">
04       <name><![CDATA[IBM]]></name>
05     </series>
06   </series_list>
07 </chart>
01{
02  seriesList: [
03    {
04      type: "Candlestick",
05      dataProvider: "dp1",
06      color: "#005ECB",
07      name: "IBM"
08    }
09  ]
10}

Let's put this together and create the very basic OHLC sample:

Live Sample:  OHLC Series

To learn more about common series settings see Common Series Settings tutorial.

to top

Configuring visualization

All visual and specific settings for OHLC series are set in <ohlc_series> in <series> node.

The width of OHLC is set using width attribute: <ohlc_series width="0.5">, which accepts values from 0 to 1.

Also, you can tune different OHLC visualization depending on rise or fall of the price. These settings are done in <rising>, and <falling> nodes.

Sample XML with width and and different visualization for rise and fall:

XML/JSON Syntax
Plain code
01 <series type="OHLC" data_provider="dp1" color="#005ECB" compare_field_type="Close">
02   <name><![CDATA[IBM]]></name>
03   <ohlc_series width="0.5">
04     <rising thickness="2" color="Green" />
05     <falling thickness="2" color="DarkRed" />
06   </ohlc_series>
07 </series>
01{
02  type: "OHLC",
03  dataProvider: "dp1",
04  color: "#005ECB",
05  compareFieldType: "Close",
06  name: "IBM",
07  ohlcSeries: {
08    width: 0.5,
09    rising: {
10      thickness: 2,
11      color: "Green"
12    },
13    falling: {
14      thickness: 2,
15      color: "DarkRed"
16    }
17  }
18}

Live Sample below shows to charts with different OHLC series, each with own specific settings:

Live Sample:  OHLC Series Visual Settings

To learn more about all available settings about visual settings see respective nodes in XML Reference.

to top

Legend Element

For each series you can define its element in legend. This element contains the settings for the formatting string of the text in legend that represents the series. Configuration of such elements is described in Legend: Series Labels article.

to top

Tooltips

You can either use global tooltip settings or create personal tooltips for each series. See detailed description in Tooltips tutorial.

to top

Choosing Field for Comparison Mode

When you use OHLC series in comparison mode (when Value axis is set to "Changes" or "PercentChanges") - you need to define comparison field.

XML for comparison mode field selection:

XML/JSON Syntax
Plain code
01 <chart>
02   <series_list>
03     <series type="OHLC" data_provider="dp1" compare_field_type="Close">
04       <name><![CDATA[MSFT]]></name>
05     </series>
06   </series_list>
07 </chart>
01{
02  seriesList: [
03    {
04      type: "OHLC",
05      dataProvider: "dp1",
06      compareFieldType: "Close",
07      name: "MSFT"
08    }
09  ]
10}

As you can see comparison field is set in compare_field_type attribute, which can: Open, High, Low and Close. By default it is Close.

Live sample below shows OHLC and Line series on one chart in Comparison mode with comparison field set to Open:

Live Sample:  OHLC Series In Comparision Mode

to top

Defaults Section

There is a special section to set default values in AnyChart Stock component XML: <series_settings>, where you can define marker and value highlighter settings for all series of the given type in one place, instead of setting them for each series individually.

For example, to configure all series of OHLC type just set:

XML/JSON Syntax
Plain code
01 <chart>
02   <series_settings_defaults>
03     <ohlc_series width="0.5">
04       <rising enabled="true" color="DarkColor(%Color)" thickness="2" opacity="1" />
05       <falling enabled="true" color="LightColor(%Color)" thickness="2" opacity="1" />
06     </ohlc_series>
07   </series_settings_defaults>
08 </chart>
01{
02  seriesSettingsDefaults: {
03    ohlcSeries: {
04      width: 0.5,
05      rising: {
06        enabled: true,
07        color: "DarkColor(%Color)",
08        thickness: 2,
09        opacity: 1
10      },
11      falling: {
12        enabled: true,
13        color: "LightColor(%Color)",
14        thickness: 2,
15        opacity: 1
16      }
17    }
18  }
19}

Live sample below has two series of Candlestick type. All common settings defined in <series_settings_defaults/> node :

Live Sample:  OHLC Series - Using Defaults Sections

to top