Appearance
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 stringname— Full display nameshortName— Abbreviated display nameexchange— Exchange or venue identifierpricePrecision— Decimal places for price valuesvolumePrecision— Decimal places for volume valuespriceCurrency— 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.) forSymbol.type, or any custom string your data feed understands (for example'prediction_market'). SYMBOL_TYPE.ALLis a filter category (for search/filter UI), not an instrument type.- Built-in types are available for classification and
enabledSymbolTypesfiltering immediately;DefaultDataFeedandchartspire-serveronly routestocks,crypto,forex, andfuturestoday — other built-in types and custom strings require a customDataFeedor 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 example15in 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 millisecondsopen— Open pricehigh— High pricelow— Low priceclose— Close pricevolume— 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]pairsasks— Ask levels as[price, quantity]pairstimestamp— 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 identifierprice— Trade pricequantity— Trade quantitytimestamp— Trade time in millisecondsside—'buy'or'sell'tradeType— Optional trade category label
TradeDataCollection groups trades for a symbol:
trades— Array ofTradeDatasymbol— Instrument tickerexchange— 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 omittedpaneId— Pane to create the indicator in. Use'candle_pane'to target the main price paneyAxisId— Y-axis to bind the indicator toshortName— Short label shown in the UIprecision— Decimal places for displayed valuescalcParams— Calculation parameters (for example MA periods[10, 30])shouldOhlc— Whether OHLC candle data is required for calculationshouldFormatBigNumber— Whether large values should be abbreviated (for example100K)visible— Whether the indicator is shownzLevel— Draw order among indicators on the same paneextendData— Custom data attached to this instanceseries—'normal'|'price'|'volume'— How the indicator relates to price/volume scalefigures— Figure definitions (lines, bars, etc.) for this instanceminValue— Fixed minimum for the indicator pane scalemaxValue— Fixed maximum for the indicator pane scalestyles— Per-instance style overridesshouldUpdate— Controls whether to recalculate and/or redraw on updatescalc— Custom calculation function for this instanceregenerateFigures— Rebuilds figure config whencalcParamschangecreateTooltipDataSource— Custom tooltip content for this instancedraw— 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 instancename— Match by registered indicator type namepaneId— 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 omittedgroupId— Group id for related overlayspaneId— Pane to create the overlay inlock— Whentrue, the overlay does not respond to drag/edit eventsvisible— Whether the overlay is shownzLevel— Draw order among overlaysneedDefaultPointFigure— Show the default figure at each pointneedDefaultXAxisFigure— Show the default figure on the x-axisneedDefaultYAxisFigure— Show the default figure on the y-axismode—'normal'|'weak_magnet'|'strong_magnet'— Snapping behavior while drawing or movingmodeSensitivity— Snap distance whenmodeis'weak_magnet'points— Anchor points for the drawingtimestamp— Bar timestampdataIndex— Bar index (used when both timestamp and index are present, index wins)value— Price/value at the point
extendData— Custom data attached to this instancestyles— Per-instance style overridesonDrawStart— Called when drawing starts. Returnfalseto cancelonDrawing— Called while drawingonDrawEnd— Called when drawing completesonClick— Called on clickonDoubleClick— Called on double-clickonRightClick— Called on right-clickonPressedMoveStart— Called when a drag/move startsonPressedMoving— Called while draggingonPressedMoveEnd— Called when a drag/move endsonMouseEnter— Called when the pointer enters the overlayonMouseLeave— Called when the pointer leaves the overlayonRemoved— Called when the overlay is removedonSelected— Called when the overlay is selectedonDeselected— 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 instancename— Match by registered overlay type namegroupId— Match overlays in a grouppaneId— Match overlays on a specific pane
Combine fields to narrow the match. Omit to operate on the default matching set per method.
Related docs
Links to APIs and integration guides that use these types.
- Widget API — constructor
symboloption - Chart API —
setSymbol/getSymbol, indicators, overlays - Indicators —
IndicatorDefinitionfor custom indicator registration - Data Access — DataFeed contract, subscriptions, and custom feed implementation
- Default DataFeed — Production-ready feed configuration and transport behavior