MacdLayerConfig

Renders the MACD indicator as a MACD line, signal line, and histogram bars on a zero-centered scale.

Examples

JSX - Minimal configuration

<MACD />

JSX - Full configuration

<MACD
  id="macd-12-26-9"
  fastPeriod={12}
  slowPeriod={26}
  signalPeriod={9}
  inputs={[{ key: 'input', source: { type: 'price', field: 'close' } }]}
  outputs={['macd', 'signal', 'histogram']}
  lookback={(period) => period * 3}
  calculate={true}
  includeInAutoScale={true}
  series={{
    macd: { color: '#1a1a1a', width: 1, style: 'solid' },
    signal: { color: '#ef4444', width: 1, style: 'solid' },
    histogramUp: { width: 0.4, backgroundColor: '#10b981', borderColor: '#10b981', borderWidth: 0 },
    histogramDown: { width: 0.4, backgroundColor: '#ef4444', borderColor: '#ef4444', borderWidth: 0 },
  }}
  markers={{
    macd: {
      mode: 'last-visible',
      line: { color: '#1a1a1a', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#1a1a1a', color: 'white' },
    },
    signal: {
      mode: 'last-visible',
      line: { color: '#ef4444', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#ef4444', color: 'white' },
    },
  }}
  legend={{
    label: 'MACD 12 26 9',
    fields: [
      { output: 'macd', color: '#1a1a1a' },
      { output: 'signal', color: '#ef4444' },
      { output: 'histogram', color: '#777' },
    ],
  }}
  yAxis={{ side: 'right', width: 80 }}
/>

Configuration Object - Full configuration

{
  id: 'macd-12-26-9',
  type: 'macd',
  fastPeriod: 12,
  slowPeriod: 26,
  signalPeriod: 9,
  inputs: [{ key: 'input', source: { type: 'price', field: 'close' } }],
  outputs: ['macd', 'signal', 'histogram'],
  lookback: (period) => period * 3,
  calculate: true,
  includeInAutoScale: true,
  series: {
    macd: { color: '#1a1a1a', width: 1, style: 'solid' },
    signal: { color: '#ef4444', width: 1, style: 'solid' },
    histogramUp: { width: 0.4, backgroundColor: '#10b981', borderColor: '#10b981', borderWidth: 0 },
    histogramDown: { width: 0.4, backgroundColor: '#ef4444', borderColor: '#ef4444', borderWidth: 0 },
  },
  markers: {
    macd: {
      mode: 'last-visible',
      line: { color: '#1a1a1a', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#1a1a1a', color: 'white' },
    },
    signal: {
      mode: 'last-visible',
      line: { color: '#ef4444', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#ef4444', color: 'white' },
    },
  },
  legend: {
    label: 'MACD 12 26 9',
    fields: [
      { output: 'macd', color: '#1a1a1a' },
      { output: 'signal', color: '#ef4444' },
      { output: 'histogram', color: '#777' },
    ],
  },
  yAxis: { side: 'right', width: 80 },
}

Properties

Base Props

BaseLayerConfig

type

• Type: 'macd'

fastPeriod

• Type: number
• Default: 12

The fast EMA period.

period (legacy alias)

• Type: number

Backward-compatible alias for fastPeriod.

slowPeriod

• Type: number
• Default: 26

The slow EMA period.

signalPeriod

• Type: number
• Default: 9

The signal line EMA period.

source

• Type: 'open' | 'high' | 'low' | 'close' | 'volume'

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

series

• Type: { macd?: false | LineConfig; signal?: false | LineConfig; histogramUp?: false | BarConfig; histogramDown?: false | BarConfig }

Visual series configuration for MACD line, signal line, and histogram bars.

markers

• Type: { macd?: false | ValueMarkerConfig; signal?: false | ValueMarkerConfig }

Value marker configuration for the MACD and signal lines.

Defaults

Property	Default
id	'macd-layer'
fastPeriod	12
slowPeriod	26
signalPeriod	9
outputs	['macd', 'signal', 'histogram']
inputs	close price field
scale	{ key: 'value_zero-centered', domain: 'value', range: { type: 'zero-centered' } }

TypeScript

interface MacdLayerConfig extends BaseLayerConfig {
  type: 'macd';
  source?: 'open' | 'high' | 'low' | 'close' | 'volume';
  fastPeriod?: number;
  period?: number;
  slowPeriod?: number;
  signalPeriod?: number;
  series?: {
    macd?: false | LineConfig;
    signal?: false | LineConfig;
    histogramUp?: false | BarConfig;
    histogramDown?: false | BarConfig;
  };
  markers?: {
    macd?: false | ValueMarkerConfig;
    signal?: false | ValueMarkerConfig;
  };
}