ChartSpire

Appearance

Technical Indicators ​

Built-in technical indicators for price analysis. Add them via the UI or API; customize parameters, styles, and layouts.

Main vs. Sub Indicators ​

  1. Main indicators — Overlaid on the price chart (same scale). Examples: MA, BOLL, Ichimoku Cloud, SAR.
  2. Sub indicators — Shown in separate panes below the chart. Examples: RSI, MACD, VOL.

Usage ​

  1. Click the Indicators button in the top bar.
  2. Choose a main or sub indicator from the list.
  3. Hover an indicator label and use the gear icon to open settings, or the × to remove it.
  4. In the Object Tree, toggle visibility or remove indicators.

Indicators are saved with layouts.

Configuration ​

OptionTypeDefaultDescription
indicatorsstring[]—Indicators to add on load (e.g. ['RSI', 'MACD'])
indicatorsEnabledbooleantrueShow/hide the top-bar Indicators button
typescript
new ChartSpire({
  indicators: ['RSI', 'MACD'],
  indicatorsEnabled: true,
  // ...
})

See Widget API — Constructor for all options.

Available Indicators ​

ChartSpire ships with 60+ built-in indicators. List registered names at runtime:

typescript
import { getSupportedIndicators } from '@chartspire/ui'

getSupportedIndicators()

Main — Average Price, BBI, BOLL, Chandelier Exit, Double Exponential Moving Average, EMA, Envelope (EMA), Envelope (SMA), Ichimoku Cloud, Keltner Channels, MA, Moving Linear Regression, SAR, SMA, volumeBars, Volume Profile Fixed Range, Volume Weighted Average Price, WEMA, WMA, WS

Sub — Absolute Price Oscillator, ADL, ADX, ADXR, AO, Aroon, ATR, Balance of Power, BIAS, BRAR, CCI, Chaikin Oscillator, CR, DMA, DMI, EMV, Force Index, KDJ, MACD, MDI, MFI, Money Flow Multiplier, Money Flow Volume, Moving Least Square, MTM, Negative Volume Index, OBV, PDI, Percentage Price Oscillator, Percentage Volume Oscillator, PSY, PVT, Qstick, ROC, RSI, TR, TRIX, VOL, Volume Price Trend, VR, WR

Use the name value (e.g. 'RSI', 'MACD') when adding indicators via API.

Adding Indicators via API ​

On widget init — pass indicators in the constructor (see Configuration).

On a chart — use Chart API methods:

typescript
chartspire.getActiveChart()?.createIndicator('MA')
chartspire.getActiveChart()?.createIndicator({
  name: 'MA',
  calcParams: [10, 30],
})
chartspire.getActiveChart()?.getIndicators()
chartspire.getActiveChart()?.removeIndicator({ name: 'RSI' })

See Chart API — Indicators for createIndicator, getIndicators, overrideIndicator, and removeIndicator.

Indicator Settings ​

Open settings from the indicator tooltip (gear icon). The modal has two tabs:

  • Parameters — Periods, source (close, open, high, low, hl2, hlc3, ohlc4), calculation options.
  • Style — Colors, line style, thickness.

Via API — update an existing instance with overrideIndicator:

typescript
chartspire.getActiveChart()?.overrideIndicator({
  id: 'indicator_id',
  calcParams: [14],
})

For widget-wide indicator colors and tooltips, see Custom Styles — Indicators.

Creating Custom Indicators ​

Define an IndicatorDefinition, register it, then add an instance on a chart:

typescript
import { registerIndicator } from '@chartspire/ui'
import type { IndicatorDefinition } from '@chartspire/ui'

const testIndicator: IndicatorDefinition = {
  isMainIndicator: false,
  isSubIndicator: true,
  name: 'testIndicator',
  shortName: 'testIndicator',
  parameters: [],
  figures: [{ key: 'close', title: 'close: ', type: 'line' }],
  calc: (dataList) => dataList.map((data) => ({ close: data.close })),
}

registerIndicator(testIndicator)
chartspire.getActiveChart()?.createIndicator('testIndicator')

Set isMainIndicator or isSubIndicator (not both). Extend with custom calc logic, multiple figures, and user-adjustable parameters.

See Extension API — registerIndicator.

Indicator Definition ​

Register custom indicator types with IndicatorDefinition. For indicator instances on a chart, see IndicatorCreate in the type reference.

typescript
interface IndicatorDefinition<T = unknown> {
  isMainIndicator: boolean
  isSubIndicator: boolean
  name: string
  parameters?: IndicatorParameters[]
  shortName?: string
  precision?: number
  calcParams?: unknown[]
  shouldOhlc?: boolean
  shouldFormatBigNumber?: boolean
  visible?: boolean
  zLevel?: number
  extendData?: unknown
  series?: 'normal' | 'price' | 'volume'
  figures?: Array<{
    key: string
    title?: string
    type?: string
    baseValue?: number
    attrs?: (params: object) => object
    styles?: (params: object) => object
  }>
  minValue?: number
  maxValue?: number
  styles?: Partial<IndicatorStyle>
  shouldUpdate?: (prev: Indicator, current: Indicator) => boolean | { calc: boolean; draw: boolean }
  calc: (candleStickData: CandleStickData[], indicator: Indicator) => Record<string, unknown> | Promise<Record<string, unknown>>
  regenerateFigures?: (calcParams: unknown[]) => Array<{
    key: string
    title?: string
    type?: string
    baseValue?: number
    attrs?: (params: object) => object
    styles?: (params: object) => object
  }>
  createTooltipDataSource?: (params: object) => {
    name?: string
    calcParamsText?: string
    features?: Array<{
      id?: string
      position?: 'left' | 'middle' | 'right'
      marginLeft?: number
      marginTop?: number
      marginRight?: number
      marginBottom?: number
      paddingLeft?: number
      paddingTop?: number
      paddingRight?: number
      paddingBottom?: number
      size?: number
      color?: string
      activeColor?: string
      backgroundColor?: string
      activeBackgroundColor?: string
      type?: 'path' | 'icon_font'
      path?: {
        style?: 'stroke' | 'fill'
        path?: string
        lineWidth?: number
      }
      iconFont?: {
        content?: string
        family?: string
      }
    }>
    legends?: Array<{
      title: string | { text: string; color: string }
      value: string | { text: string; color: string }
    }>
  }
  draw?: (params: object) => boolean
  onDataStateChange?: (params: object) => void
}

Parameters ​

  • name — Unique identifier for creation and updates.
  • shortName — Display name in tooltips.
  • precision — Decimal precision.
  • calcParams — Calculation parameter values.
  • shouldOhlc — Show OHLC bar.
  • shouldFormatBigNumber — Format large numbers for display.
  • visible — Show or hide the indicator.
  • zLevel — Draw order among indicators on the same pane.
  • extendData — Custom extended data.
  • series — 'normal' | 'price' | 'volume'. When 'price' or 'volume' and precision is unset, precision follows the chart.
  • figures — Output series configuration.
    • key — Matches a key returned by calc.
    • type — Figure type from candleStickData.getSupportedFigures().
    • baseValue — Baseline for rect and bar figures.
    • attrs — Returns props for candleStickData.getFigureClass().
    • styles — Returns styles for candleStickData.getFigureClass().
  • minValue / maxValue — Pane scale bounds.
  • styles — Same shape as global indicator styles.
  • shouldUpdate — Control recalculation/redraw.
  • calc — Required calculation function.
  • regenerateFigures — Rebuild figures when calcParams change.
  • createTooltipDataSource — Custom tooltip content.
  • draw — Return true to replace default drawing.
  • onDataStateChange — Data change callback.

Copyright © 2026 ChartSpire