ChartIndicatorProps

Defines the configuration for rendering technical indicators that represent market trends based on derived statistical calculations. Technical compute values from a source series and render them either as overlays or in separate indicator panels for advanced analysis.

Props

The following table outlines the props for the ChartIndicatorProps:

NameTypeDefaultDescription
accessibility
ChartAccessibilityProps
{ ariaLabel: '', focusable: true, tabIndex: 0, role: '' }

Specifies accessibility settings for technical indicator elements.

animation
Animation
{ enable: true, duration: 1000, delay: 0 }

Configures the animation settings for the indicator rendering. Animation is enabled by default and supports duration and delay.

bandColor
string
'rgba(211,211,211,0.25)'

Specifies the fill color used for the Bollinger Bands range area.

dPeriod
number
3

Defines the smoothing period used to calculate the %D value in the Stochastic Oscillator.

dashArray
string
''

Defines the dash pattern applied to indicator lines.

fastPeriod
number
26

Specifies the fast period used to calculate the MACD line.

field
FinancialDataField
'Close'

Specifies the financial data field used to compare the current value with previous values when calculating technical indicators. This property is applicable to indicators that require price-based Comparisons such as RSI, MACD, ATR, and Stochastic.

fill
string
''

Specifies the stroke or fill color of the indicator. For technical indicators, this value represents the color of signal or trend lines.

kPeriod
number
14

Defines the look back period used to calculate the %K value in the Stochastic Oscillator.

lowerLine
ConnectorProps
{ type: 'Line', color: '#000', width: 1, length: '', dashArray: '' }

Configures the appearance of the lower line in band based technical indicators.

macdLine
ConnectorProps
{ color: '#ff9933', width: 2 }

Configures the visual appearance of the MACD line.

macdNegativeColor
string
'#e74c3d'

Specifies the fill color for negative histogram bars in the MACD indicator.

macdPositiveColor
string
'#2ecd71'

Specifies the fill color for positive histogram bars in the MACD indicator.

macdType
MacdType
'Both'

Specifies the rendering mode of the MACD indicator.

overBought
number
80

Specifies the over bought threshold value. This property is applicable to RSI and Stochastic indicators.

overSold
number
20

Specifies the over sold threshold value. This property is applicable to RSI and Stochastic indicators.

period
number
14

Specifies the look back period used to calculate the indicator values. This property is applicable to indicators that rely on rolling window calculations such as moving averages, RSI, ATR, and Momentum.

periodLine
ConnectorProps
{ type: 'Line', color: '#000', width: 1, length: '', dashArray: '' }

Configures the appearance of the central or signal line used in technical indicators.

seriesName
string
''

Specifies the name of the source series used for calculating the indicator values.

showZones
boolean
true

Enables or disables the rendering of over bought and over sold regions for applicable indicators.

slowPeriod
number
12

Specifies the slow period used to calculate the MACD line.

standardDeviation
number
2

Defines the standard deviation multiplier used to calculate the upper and lower Bollinger Bands.

type
IndicatorsType
'Sma'

Specifies the type of technical indicator to be rendered. Supported indicator types include:

  • Sma – Simple Moving Average
  • Ema – Exponential Moving Average
  • Tma – Triangular Moving Average
  • Atr – Average True Range
  • AccumulationDistribution – Accumulation / Distribution
  • Momentum – Momentum Indicator
  • Rsi – Relative Strength Index
  • Macd – Moving Average Convergence Divergence
  • Stochastic – Stochastic Oscillator
  • BollingerBands – Bollinger Bands
upperLine
ConnectorProps
{ type: 'Line', color: '#000', width: 1, length: '', dashArray: '' }

Configures the appearance of the upper line in band based technical indicators.

visible
boolean
true

Determines whether the indicator is visible.

width
number
1

Specifies the stroke width of indicator lines.

xAxisName
string | null
null

Specifies the name of the horizontal axis associated with the indicator. This property requires the axis to be defined in the chart axes collection.

yAxisName
string | null
null

Specifies the name of the vertical axis associated with the indicator. This property enables rendering the indicator in a separate sub panel with an independent Y axis.