StochasticLayerConfig

Renders the Stochastic Oscillator as a %K line and %D signal line on a bounded 0–100 scale.

Examples

JSX - Minimal configuration

<Stochastic />

JSX - Full configuration

<Stochastic
  id="stoch-14-3-3"
  kPeriod={14}
  kSmoothing={3}
  dPeriod={3}
  valueGridLines={[20, 80]}
  inputs={[
    { key: 'high', source: { type: 'price', field: 'high' } },
    { key: 'low', source: { type: 'price', field: 'low' } },
    { key: 'close', source: { type: 'price', field: 'close' } },
  ]}
  outputs={['k', 'kSmoothed', 'd']}
  lookback={(period) => period * 2}
  calculate={true}
  includeInAutoScale={true}
  series={{
    k: { color: '#1a1a1a', width: 1, style: 'solid' },
    d: { color: '#ef4444', width: 1, style: 'solid' },
  }}
  markers={{
    k: {
      mode: 'last-visible',
      line: { color: '#1a1a1a', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#1a1a1a', color: 'white' },
    },
    d: {
      mode: 'last-visible',
      line: { color: '#ef4444', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#ef4444', color: 'white' },
    },
  }}
  legend={{
    label: 'Stochastic 14 3 3',
    fields: [
      { output: 'k', label: '', color: '#1a1a1a' },
      { output: 'd', label: '', color: '#ef4444' },
    ],
  }}
  yAxis={{ side: 'right', width: 80 }}
/>

Configuration Object - Full configuration

{
  id: 'stoch-14-3-3',
  type: 'stochastic',
  kPeriod: 14,
  kSmoothing: 3,
  dPeriod: 3,
  valueGridLines: [20, 80],
  inputs: [
    { key: 'high', source: { type: 'price', field: 'high' } },
    { key: 'low', source: { type: 'price', field: 'low' } },
    { key: 'close', source: { type: 'price', field: 'close' } },
  ],
  outputs: ['k', 'kSmoothed', 'd'],
  lookback: (period) => period * 2,
  calculate: true,
  includeInAutoScale: true,
  series: {
    k: { color: '#1a1a1a', width: 1, style: 'solid' },
    d: { color: '#ef4444', width: 1, style: 'solid' },
  },
  markers: {
    k: {
      mode: 'last-visible',
      line: { color: '#1a1a1a', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#1a1a1a', color: 'white' },
    },
    d: {
      mode: 'last-visible',
      line: { color: '#ef4444', width: 1, style: 'dashed', dashes: [5, 5] },
      label: { backgroundColor: '#ef4444', color: 'white' },
    },
  },
  legend: {
    label: 'Stochastic 14 3 3',
    fields: [
      { output: 'k', label: '', color: '#1a1a1a' },
      { output: 'd', label: '', color: '#ef4444' },
    ],
  },
  yAxis: { side: 'right', width: 80 },
}

Properties

Base Props

BaseLayerConfig

type

• Type: 'stochastic'

kPeriod

• Type: number
• Default: 14

The %K lookback period.

period (legacy alias)

• Type: number

Backward-compatible alias for kPeriod.

kSmoothing

• Type: number
• Default: 3

The smoothing period applied to the raw %K line.

dPeriod

• Type: number
• Default: 3

The period used to calculate the %D signal line as a moving average of %K.

source

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

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

series

• Type: { k?: false | LineConfig; d?: false | LineConfig }

Visual series configuration for %K and %D lines.

markers

• Type: { k?: false | ValueMarkerConfig; d?: false | ValueMarkerConfig }

Value marker configuration for %K and %D lines.

Defaults

Property	Default
id	'stochastic-layer'
kPeriod	14
kSmoothing	3
dPeriod	3
inputs	high, low, close price fields
outputs	['k', 'kSmoothed', 'd']
scale	{ key: 'value_bounded_0_100', domain: 'value', range: { type: 'bounded', min: 0, max: 100 } }

TypeScript

interface StochasticLayerConfig extends BaseLayerConfig {
  type: 'stochastic';
  source?: {
    high?: 'open' | 'high' | 'low' | 'close' | 'volume';
    low?: 'open' | 'high' | 'low' | 'close' | 'volume';
    close?: 'open' | 'high' | 'low' | 'close' | 'volume';
  };
  kPeriod?: number;
  period?: number;
  kSmoothing?: number;
  dPeriod?: number;
  series?: {
    k?: false | LineConfig;
    d?: false | LineConfig;
  };
  markers?: {
    k?: false | ValueMarkerConfig;
    d?: false | ValueMarkerConfig;
  };
}