AtrLayerConfig

Renders the Average True Range (ATR) indicator as a line.

Examples

### JSX - Minimal configuration

<ATR />

JSX - Full configuration

<ATR
  id="atr-14"
  period={14}
  inputs={[
    { key: 'high', source: { type: 'price', field: 'high' } },
    { key: 'low', source: { type: 'price', field: 'low' } },
    { key: 'close', source: { type: 'price', field: 'close' } },
  ]}
  outputs={['value']}
  lookback={(period) => period * 2}
  calculate={true}
  includeInAutoScale={true}
  series={{ value: { color: '#1a1a1a', width: 1, style: 'solid' } }}
  markers={{
    value: {
      mode: 'last-visible',
      line: { color: '#555', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#ccc', color: '#1a1a1a' },
    },
  }}
  legend={{
    label: 'ATR 14',
    fields: [{ output: 'value', label: '', color: '#1a1a1a' }],
  }}
  yAxis={{
    side: 'right',
    width: 80,
  }}
/>

Configuration Object - Full configuration

{
  id: 'atr-14',
  type: 'atr',
  period: 14,
  inputs: [
    { key: 'high', source: { type: 'price', field: 'high' } },
    { key: 'low', source: { type: 'price', field: 'low' } },
    { key: 'close', source: { type: 'price', field: 'close' } },
  ],
  outputs: ['value'],
  lookback: (period) => period * 2,
  calculate: true,
  includeInAutoScale: true,
  series: { value: { color: '#1a1a1a', width: 1, style: 'solid' } },
  markers: {
    value: {
      mode: 'last-visible',
      line: { color: '#555', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#ccc', color: '#1a1a1a' },
    },
  },
  legend: {
    label: 'ATR 14',
    fields: [{ output: 'value', label: '', color: '#1a1a1a' }],
  },
  yAxis: {
    side: 'right',
    width: 80,
  },
}

Properties

Base Props

BaseLayerConfig

type

• Type: 'atr'

source

• Type: { high?: 'open' | 'high' | 'low' | 'close' | 'volume'; low?: 'open' | 'high' | 'low' | 'close' | 'volume'; close?: 'open' | 'high' | 'low' | 'close' | 'volume' }

Optional shorthand for mapping ATR inputs without writing full inputs. If inputs is provided, it takes precedence.

series

• Type: { value?: false | LineConfig }

Visual series configuration for ATR.

markers

• Type: { value?: false | ValueMarkerConfig }

Value marker configuration for ATR.

Defaults

Property	Default
id	'atr-layer'
period	14
inputs	high, low, close price fields
scale	{ key: 'value_auto', domain: 'value', range: { type: 'auto' } }
series.value	{ color: '#1a1a1a', style: 'solid', width: 1 }

TypeScript

interface AtrLayerConfig extends BaseLayerConfig {
  type: 'atr';
  source?: {
    high?: 'open' | 'high' | 'low' | 'close' | 'volume';
    low?: 'open' | 'high' | 'low' | 'close' | 'volume';
    close?: 'open' | 'high' | 'low' | 'close' | 'volume';
  };
  series?: { value?: false | LineConfig };
  markers?: { value?: false | ValueMarkerConfig };
}