Skip to content

RsiLayerConfig

Renders the Relative Strength Index (RSI) indicator as a line on a bounded 0–100 scale.

Examples

JSX - Minimal configuration

tsx
<RSI />

JSX - Full configuration

tsx
<RSI
  id="rsi-14"
  period={14}
  valueGridLines={[20, 80]}
  inputs={[{ key: 'input', source: { type: 'price', field: 'close' } }]}
  outputs={['value']}
  lookback={(period) => period * 3}
  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: 'RSI 14',
    fields: [{ output: 'value', label: '', color: '#1a1a1a' }],
  }}
  yAxis={{ side: 'right', width: 80 }}
/>

Configuration Object - Full configuration

ts
{
  id: 'rsi-14',
  type: 'rsi',
  period: 14,
  valueGridLines: [20, 80],
  inputs: [{ key: 'input', source: { type: 'price', field: 'close' } }],
  outputs: ['value'],
  lookback: (period) => period * 3,
  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: 'RSI 14',
    fields: [{ output: 'value', label: '', color: '#1a1a1a' }],
  },
  yAxis: { side: 'right', width: 80 },
}

Properties

Base Props

BaseLayerConfig

type

  • Type: 'rsi'

source

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

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

series

  • Type: { value?: false | LineConfig }

Visual series configuration for RSI.

markers

  • Type: { value?: false | ValueMarkerConfig }

Value marker configuration for RSI.

Defaults

PropertyDefault
id'rsi-layer'
period14
inputsclose price field
scale{ key: 'value_bounded_0_100', domain: 'value', range: { type: 'bounded', min: 0, max: 100 } }
series.value{ color: '#1a1a1a', style: 'solid', width: 1 }

TypeScript

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

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