Average True Range (ATR)

Overview

Developed by J. Welles Wilder, the Average True Range (ATR) is an indicator that measures volatility. As with most of his indicators, Wilder designed ATR with commodities and daily prices in mind. Commodities are frequently more volatile than stocks. They were are often subject to gaps and limit moves, which occur when a commodity opens up or down its maximum allowed move for the session. A volatility formula based only on the high-low range would fail to capture volatility from gap or limit moves. Wilder created Average True Range to capture this "missing" volatility. It is important to remember that ATR does not provide an indication of price direction, just volatility.

Mathematical description of the indicator please see at: Mathematical Description of Technical Indicators

to top

Adding indicator

To add any indicator to the chart, you need to use Data Provider with the fields required by the indicator. When such Data Provider is ready - you can add indicator to the chart.

Preparing Data Provider

ATR indicator needs Data Provider with High, Low and Close fields.

Sample XML/JSON of Data Provider, which can be used to create ATR indicator:

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

to top

Indicator Declaration

As soon as Data Provider is ready you can add an indicator to a chart.

ATR indicator is usually shown on the chart below the chart with data (stock data). So we should declare it in another chart. Learn more about charts and layout in Chart Layout article.

XML/JSON for ATR declaration, note that there are two charts defined - one is used to show the stock data, and another one contains technical indicator:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <charts>
05       <chart>
06         <series_list>
07           <series type="Line" data_provider="dpMsft" />
08         </series_list>
09       </chart>
10       <chart>
11         <technical_indicators>
12           <technical_indicator type="ATR" data_provider="dpMsft" />
13         </technical_indicators>
14       </chart>
15     </charts>
16   </settings>
17 </stock>
01{
02  settings: {
03    charts: [
04      {
05        seriesList: [
06          {
07            type: "Line",
08            dataProvider: "dpMsft"
09          }
10        ]
11      },
12      {
13        technicalIndicators: [
14          {
15            type: "ATR",
16            dataProvider: "dpMsft"
17          }
18        ]
19      }
20    ]
21  }
22}

After all things mentioned above are done, you can create a chart with ATR indicator, see basic Live Sample with it below:

Live Sample:  Technical Indicators - Adding ATR Indicator

to top

Indicator parameters

Average True Range indicator has only one type specific parameter - period. Period is set in <atr_indicator> node, where all settings for ATR indicator are set.

XML/JSON for setting ATR period:

XML/JSON Syntax
Plain code
01 <chart>
02   <technical_indicators>
03     <technical_indicator type="ATR" data_provider="dpMsft">
04       <atr_indicator period="30" />
05     </technical_indicator>
06   </technical_indicators>
07 </chart>
01{
02  technicalIndicators: [
03    {
04      type: "ATR",
05      dataProvider: "dpMsft",
06      atrIndicator: {
07        period: 30
08      }
09    }
10  ]
11}

As you can see you just need to set period attribute in <atr_indicator> node, this attribute accepts any integer greater than 1.

Live sample below shows ATR(20):

Live Sample:  Technical Indicators - ATR Parameters

to top

Visualization

To visualize and tune visualization of technical indicators AnyChart Stock Component uses the same methods as for the data series.

By default ATR is shown as series of Line type, but you can use almost any of available series types to show it on the chart - Spline, Area or Stick, for example.

ATR indicator settings are contained in <atr_indicator> node, also in this node you can put <series> subnode - this node defines how exactly indicator is displayed on the chart. This node is identical to <series> node used to describe data series, so you can do with indicator anything you can do with series.

Sample XML/JSON for changing indicator visualization:

XML/JSON Syntax
Plain code
01 <chart>
02   <technical_indicators>
03     <technical_indicator type="ATR" data_provider="dpMsft">
04       <atr_indicator period="20">
05         <series type="Area" color="#469833">
06           <name><![CDATA[Average True Range(20)]]></name>
07         </series>
08       </atr_indicator>
09     </technical_indicator>
10   </technical_indicators>
11 </chart>
01{
02  technicalIndicators: [
03    {
04      type: "ATR",
05      dataProvider: "dpMsft",
06      atrIndicator: {
07        period: 20,
08        series: {
09          type: "Area",
10          color: "#469833",
11          name: "Average True Range(20)"
12        }
13      }
14    }
15  ]
16}

Live sample below shows settings shown above:

Live Sample:  Technical Indicators - ATR Visualization Settings

to top