AdxLayerConfig

Renders the Average Directional Index (ADX) as a single line with a scale derived from values in the visible viewport.

Examples

JSX - Minimal configuration

<ADX />

JSX - Full configuration

<ADX
  id="adx-14-14"
  diLength={14}
  smoothing={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' },
  }}
  legend={{
    label: 'ADX 14 14',
    fields: [
      { output: 'value', label: '', color: '#1a1a1a' },
    ],
  }}
/>

Configuration Object

{
  type: 'adx',
  diLength: 14,
  smoothing: 14,
  series: {
    value: { color: '#1a1a1a' },
  },
}

Properties

Base Props

BaseLayerConfig

type

• Type: 'adx'

source

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

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

diLength

• Type: number
• Default: 14

The length used to smooth true range and directional movement.

smoothing

• Type: number
• Default: 14

The Wilder smoothing length applied to the directional index to produce ADX.

series

• Type: { value?: false | LineConfig }

Visual configuration for the ADX line.

markers

• Type: { value?: false | ValueMarkerConfig }

Value marker configuration for the ADX line.

Indicator value markers are disabled by default. Set markers.value to {} to show one.

Defaults

Property	Default
id	'adx-layer'
diLength	14
smoothing	14
inputs	high, low, close price fields
outputs	['value']
scale	{ key: 'value_auto', domain: 'value', range: { type: 'auto' } }

TypeScript

interface AdxLayerConfig extends BaseLayerConfig {
  type: 'adx';
  diLength?: number;
  smoothing?: number;
  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;
  };
}