Skip to content

EmaLayerConfig

Renders an Exponential Moving Average (EMA) line, typically overlaid on price.

Examples

JSX - Minimal configuration

tsx
<EMA />

JSX - Full configuration

tsx
<EMA
  id="ema-9"
  period={9}
  offset={0}
  inputs={[{ key: 'input', source: { type: 'price', field: 'close' } }]}
  outputs={['value']}
  lookback={(period) => period * 3}
  calculate={true}
  includeInAutoScale={false}
  series={{ value: { color: '#1a1a1a', width: 1, style: 'solid' } }}
  markers={{
    value: {
      mode: 'last-visible',
      line: { color: '#333', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#333', color: 'white' },
    },
  }}
  legend={{
    label: 'EMA 9',
    fields: [{ output: 'value', label: '', color: '#1a1a1a' }],
  }}
  yAxis={{ side: 'right', width: 80 }}
/>

Configuration Object - Full configuration

ts
{
  id: 'ema-9',
  type: 'ema',
  period: 9,
  offset: 0,
  inputs: [{ key: 'input', source: { type: 'price', field: 'close' } }],
  outputs: ['value'],
  lookback: (period) => period * 3,
  calculate: true,
  includeInAutoScale: false,
  series: { value: { color: '#1a1a1a', width: 1, style: 'solid' } },
  markers: {
    value: {
      mode: 'last-visible',
      line: { color: '#333', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#333', color: 'white' },
    },
  },
  legend: {
    label: 'EMA 9',
    fields: [{ output: 'value', label: '', color: '#1a1a1a' }],
  },
  yAxis: { side: 'right', width: 80 },
}

Properties

Base Props

BaseLayerConfig

type

  • Type: 'ema'

offset

  • Type: number
  • Default: 0

source

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

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

series

  • Type: { value?: false | LineConfig }

Visual series configuration for EMA.

markers

  • Type: { value?: false | ValueMarkerConfig }

Value marker configuration for EMA.

Defaults

PropertyDefault
id'ema-layer'
period50
offset0
inputsclose price field
scale{ key: 'price_auto', domain: 'price', range: { type: 'auto' } }
includeInAutoScalefalse
series.value{ color: '#1a1a1a', style: 'solid', width: 1 }

TypeScript

ts
interface EmaLayerConfig extends BaseLayerConfig {
  type: 'ema';
  source?: 'open' | 'high' | 'low' | 'close' | 'volume';
  offset?: number;
  series?: { value?: false | LineConfig };
  markers?: { value?: false | ValueMarkerConfig };
}

React Candlesticks is available on npm and GitHub under the MIT License.