Skip to content

Type Reference

Canonical TypeScript shapes for ChartSpire — symbols, intervals, market data, and Chart API config types.

For DataFeed behavior, subscriptions, and implementation guidance, see Data Access.

ChartOptions

Public constructor options for new ChartSpire(options). Exported from @chartspire/ui.

Full field reference: Widget API — Constructor.

typescript
import type { ChartOptions } from '@chartspire/ui'

Symbol

A tradable instrument. Used in the ChartSpire constructor, Chart API setSymbol / getSymbol, DataFeed methods, watchlists, order book, and trades.

typescript
import type { Symbol } from '@chartspire/ui'
import { SYMBOL_TYPE } from '@chartspire/ui'

interface Symbol {
  symbol: string
  type: SYMBOL_TYPE | string | 'UNKNOWN'
  name?: string
  shortName?: string
  exchange?: string
  pricePrecision?: number
  volumePrecision?: number
  priceCurrency?: string
  logo?: string
}

Fields

  • symbol — Ticker or instrument code (for example 'BTCUSDT')
  • type — Asset classification. See SymbolType or a custom string
  • name — Full display name
  • shortName — Abbreviated display name
  • exchange — Exchange or venue identifier
  • pricePrecision — Decimal places for price values
  • volumePrecision — Decimal places for volume values
  • priceCurrency — Quote currency (for example 'USDT')
  • logo — Logo URL for UI display

Example:

typescript
import type { Symbol } from '@chartspire/ui'
import { SYMBOL_TYPE } from '@chartspire/ui'

const btc: Symbol = {
  symbol: 'BTCUSDT',
  type: SYMBOL_TYPE.CRYPTO,
  name: 'Bitcoin',
  shortName: 'BTC',
  exchange: 'binance',
  priceCurrency: 'USDT',
  pricePrecision: 2,
  volumePrecision: 6,
}

SymbolType

Built-in asset classification enum (SYMBOL_TYPE).

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

enum SYMBOL_TYPE {
  STOCKS = 'stocks',
  PREFERRED_STOCKS = 'preferred_stocks',
  ADR = 'adr',
  REIT = 'reit',
  ETF = 'etf',
  MUTUAL_FUNDS = 'mutual_funds',
  CRYPTO = 'crypto',
  PERPETUALS = 'perpetuals',
  FOREX = 'forex',
  CURRENCY = 'currency',
  FUTURES = 'futures',
  OPTIONS = 'options',
  WARRANTS = 'warrants',
  SPREADS = 'spreads',
  SWAPS = 'swaps',
  CFD = 'cfd',
  STRUCTURED_PRODUCTS = 'structured_products',
  INDICES = 'indices',
  ECONOMIC = 'economic',
  COMMODITIES = 'commodities',
  METALS = 'metals',
  ENERGY = 'energy',
  BONDS = 'bonds',
  RATES = 'rates',
  OTHER = 'other',
  ALL = 'all',
}

Notes:

  • Use concrete types (stocks, crypto, options, etc.) for Symbol.type, or any custom string your data feed understands (for example 'prediction_market').
  • SYMBOL_TYPE.ALL is a filter category (for search/filter UI), not an instrument type.
  • Built-in types are available for classification and enabledSymbolTypes filtering immediately; DefaultDataFeed and chartspire-server only route stocks, crypto, forex, and futures today — other built-in types and custom strings require a custom DataFeed or server support.

Custom symbol types

For proprietary or domain-specific assets, pass custom strings through Symbol.type and enabledSymbolTypes:

typescript
import { ChartSpire, SYMBOL_TYPE } from '@chartspire/ui'

const chart = new ChartSpire({
  symbol: { symbol: 'ELECTION2028', type: 'prediction_market', exchange: 'polymarket' },
  enabledSymbolTypes: [SYMBOL_TYPE.CRYPTO, 'prediction_market'],
  // ...
})

Custom types appear as filter tags in symbol search when listed in enabledSymbolTypes. Your DataFeed (or DefaultDataFeed backend) must accept and return those type strings in search and subscription flows.

Interval

Chart timeframe metadata.

typescript
import type { Interval } from '@chartspire/ui'

interface Interval {
  multiplier: number
  timespan: string
  text: string
}

Fields

  • multiplier — Number of units (for example 15 in a 15-minute chart)
  • timespan — Unit of time ('second', 'minute', 'hour', 'day', 'week', 'month', 'year')
  • text — Display label (for example '15m', 'D')

Common examples:

  • { multiplier: 1, timespan: 'minute', text: '1m' }
  • { multiplier: 15, timespan: 'minute', text: '15m' }
  • { multiplier: 1, timespan: 'day', text: 'D' }
  • { multiplier: 1, timespan: 'week', text: 'W' }

Market data

Types for candles, order book snapshots, and trade history returned by feeds and widgets.

CandleStickData

A single OHLCV candlestick bar.

typescript
import type { CandleStickData } from '@chartspire/ui'

interface CandleStickData {
  timestamp: number
  open: number
  high: number
  low: number
  close: number
  volume?: number
  turnover?: number
  [key: string]: unknown
}

Fields

  • timestamp — Bar open time in milliseconds
  • open — Open price
  • high — High price
  • low — Low price
  • close — Close price
  • volume — Traded volume (optional)
  • turnover — Traded turnover (optional)
  • [key: string] — Additional custom fields

OrderBookData

A snapshot of bid and ask price levels at a point in time.

typescript
interface OrderBookData {
  bids: Array<[string, string]> // [price, quantity]
  asks: Array<[string, string]> // [price, quantity]
  timestamp: number
}

Fields

  • bids — Bid levels as [price, quantity] pairs
  • asks — Ask levels as [price, quantity] pairs
  • timestamp — Snapshot time in milliseconds

TradeData

A single executed trade and the collection type used to batch trades for a symbol.

typescript
interface TradeData {
  id: string
  price: string
  quantity: string
  timestamp: number
  side: 'buy' | 'sell'
  tradeType?: string
}

interface TradeDataCollection {
  trades: TradeData[]
  symbol: string
  exchange?: string
  lastUpdated: number
}

Fields

  • id — Unique trade identifier
  • price — Trade price
  • quantity — Trade quantity
  • timestamp — Trade time in milliseconds
  • side'buy' or 'sell'
  • tradeType — Optional trade category label

TradeDataCollection groups trades for a symbol:

  • trades — Array of TradeData
  • symbol — Instrument ticker
  • exchange — Exchange or venue (optional)
  • lastUpdated — Collection update time in milliseconds

Indicators

Types for Chart API indicator methods (createIndicator, getIndicators, overrideIndicator, removeIndicator).

Not to be confused with IndicatorDefinition, which registers a custom indicator type via Extension API registerIndicator. The types below describe indicator instances on a chart.

IndicatorCreate

Config object for chart.createIndicator(...) when you need more than a name string. name is required; other fields are optional.

typescript
import type { IndicatorCreate } from '@chartspire/ui'

type IndicatorCreate = {
  name: string
  id?: string
  paneId?: string
  yAxisId?: string
  shortName?: string
  precision?: number
  calcParams?: unknown[]
  shouldOhlc?: boolean
  shouldFormatBigNumber?: boolean
  visible?: boolean
  zLevel?: number
  extendData?: unknown
  series?: 'normal' | 'price' | 'volume'
  figures?: Array<object>
  minValue?: number
  maxValue?: number
  styles?: Partial<IndicatorStyle>
  shouldUpdate?: (prev: Indicator, current: Indicator) => boolean | { calc: boolean, draw: boolean }
  calc?: (candleStickDataList: CandleStickData[], indicator: Indicator) => unknown
  regenerateFigures?: (calcParams: unknown[]) => Array<object>
  createTooltipDataSource?: (params: object) => object
  draw?: (params: object) => boolean
}

Fields

  • name — Registered indicator type name (for example 'MA', 'RSI')
  • id — Custom instance id. Auto-generated when omitted
  • paneId — Pane to create the indicator in. Use 'candle_pane' to target the main price pane
  • yAxisId — Y-axis to bind the indicator to
  • shortName — Short label shown in the UI
  • precision — Decimal places for displayed values
  • calcParams — Calculation parameters (for example MA periods [10, 30])
  • shouldOhlc — Whether OHLC candle data is required for calculation
  • shouldFormatBigNumber — Whether large values should be abbreviated (for example 100K)
  • visible — Whether the indicator is shown
  • zLevel — Draw order among indicators on the same pane
  • extendData — Custom data attached to this instance
  • series'normal' | 'price' | 'volume' — How the indicator relates to price/volume scale
  • figures — Figure definitions (lines, bars, etc.) for this instance
  • minValue — Fixed minimum for the indicator pane scale
  • maxValue — Fixed maximum for the indicator pane scale
  • styles — Per-instance style overrides
  • shouldUpdate — Controls whether to recalculate and/or redraw on updates
  • calc — Custom calculation function for this instance
  • regenerateFigures — Rebuilds figure config when calcParams change
  • createTooltipDataSource — Custom tooltip content for this instance
  • draw — Custom draw hook for this instance

Example:

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

IndicatorFilter

Filter for chart.getIndicators(...) and chart.removeIndicator(...).

typescript
import type { IndicatorFilter } from '@chartspire/ui'

type IndicatorFilter = {
  id?: string
  name?: string
  paneId?: string
}

Fields

  • id — Match a specific indicator instance
  • name — Match by registered indicator type name
  • paneId — Match indicators on a specific pane

Combine fields to narrow the match. Omit to operate on the default matching set per method.

Overlays

Types for Chart API overlay methods (createOverlay, getOverlays, overrideOverlay, removeOverlay).

OverlayCreate

Config object for chart.createOverlay(...) when you need more than a name string. name is required; other fields are optional.

typescript
import type { OverlayCreate } from '@chartspire/ui'

type OverlayCreate = {
  name: string
  id?: string
  groupId?: string
  paneId?: string
  lock?: boolean
  visible?: boolean
  zLevel?: number
  needDefaultPointFigure?: boolean
  needDefaultXAxisFigure?: boolean
  needDefaultYAxisFigure?: boolean
  mode?: 'normal' | 'weak_magnet' | 'strong_magnet'
  modeSensitivity?: number
  points?: Array<{ timestamp: number, dataIndex?: number, value?: number }>
  extendData?: unknown
  styles?: object
  onDrawStart?: (event: object) => boolean
  onDrawing?: (event: object) => boolean
  onDrawEnd?: (event: object) => boolean
  onClick?: (event: object) => boolean
  onDoubleClick?: (event: object) => boolean
  onRightClick?: (event: object) => boolean
  onPressedMoveStart?: (event: object) => boolean
  onPressedMoving?: (event: object) => boolean
  onPressedMoveEnd?: (event: object) => boolean
  onMouseEnter?: (event: object) => boolean
  onMouseLeave?: (event: object) => boolean
  onRemoved?: (event: object) => boolean
  onSelected?: (event: object) => boolean
  onDeselected?: (event: object) => boolean
}

Fields

  • name — Registered overlay type name (for example 'segment', 'rayLine')
  • id — Custom instance id. Auto-generated when omitted
  • groupId — Group id for related overlays
  • paneId — Pane to create the overlay in
  • lock — When true, the overlay does not respond to drag/edit events
  • visible — Whether the overlay is shown
  • zLevel — Draw order among overlays
  • needDefaultPointFigure — Show the default figure at each point
  • needDefaultXAxisFigure — Show the default figure on the x-axis
  • needDefaultYAxisFigure — Show the default figure on the y-axis
  • mode'normal' | 'weak_magnet' | 'strong_magnet' — Snapping behavior while drawing or moving
  • modeSensitivity — Snap distance when mode is 'weak_magnet'
  • points — Anchor points for the drawing
    • timestamp — Bar timestamp
    • dataIndex — Bar index (used when both timestamp and index are present, index wins)
    • value — Price/value at the point
  • extendData — Custom data attached to this instance
  • styles — Per-instance style overrides
  • onDrawStart — Called when drawing starts. Return false to cancel
  • onDrawing — Called while drawing
  • onDrawEnd — Called when drawing completes
  • onClick — Called on click
  • onDoubleClick — Called on double-click
  • onRightClick — Called on right-click
  • onPressedMoveStart — Called when a drag/move starts
  • onPressedMoving — Called while dragging
  • onPressedMoveEnd — Called when a drag/move ends
  • onMouseEnter — Called when the pointer enters the overlay
  • onMouseLeave — Called when the pointer leaves the overlay
  • onRemoved — Called when the overlay is removed
  • onSelected — Called when the overlay is selected
  • onDeselected — Called when the overlay is deselected

OverlayFilter

Filter for chart.getOverlays(...) and chart.removeOverlay(...).

typescript
import type { OverlayFilter } from '@chartspire/ui'

type OverlayFilter = {
  id?: string
  name?: string
  groupId?: string
  paneId?: string
}

Fields

  • id — Match a specific overlay instance
  • name — Match by registered overlay type name
  • groupId — Match overlays in a group
  • paneId — Match overlays on a specific pane

Combine fields to narrow the match. Omit to operate on the default matching set per method.

Links to APIs and integration guides that use these types.

  • Widget API — constructor symbol option
  • Chart APIsetSymbol / getSymbol, indicators, overlays
  • IndicatorsIndicatorDefinition for custom indicator registration
  • Data Access — DataFeed contract, subscriptions, and custom feed implementation
  • Default DataFeed — Production-ready feed configuration and transport behavior