Chart API

Methods for a single chart. Obtain a handle from the Widget API:

const chart = chartspire.getChart({ id: 'chart1' })
const active = chartspire.getActiveChart()

Use { id: 'chart1' }, { id: 'chart2' }, and so on, or values returned by getVisibleChartIds(). See Widget API — Charts and multichart for how chart IDs are assigned.

Returns null until that chart is mounted.

chartspire.getChart({ id: 'chart2' })?.createOverlay('segment')
chartspire.getActiveChart()?.zoomAtDataIndex(1.2, 100)

chartspire.getVisibleChartIds().forEach((id) => {
  chartspire.getChart(id)?.scrollToRealTime()
})

Locale and timezone are configured on the Widget API. For styling, use Widget API setCustomStyles (widget-wide, persists across theme switches).

Undocumented methods from the underlying chart engine are intentionally unavailable on ChartApi. Only the methods on this page are part of the public Chart API.

Symbol and period

setSymbol(symbol)

Set the chart symbol. Pass a Symbol object.

(symbol: Symbol) => void

Returns — void

chartspire.getChart({ id: 'chart1' })?.setSymbol({
  symbol: 'BTCUSDT',
  type: 'crypto',
  exchange: 'binance',
})

getSymbol()

Get the chart symbol.

() => Symbol | null

Returns — Current Symbol, or null

setPeriod(period)

Set the chart period.

(period: Period) => void

Parameters

• period
  • type — 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'
  • span — Multiplier for the period type

Returns — void

chartspire.getActiveChart()?.setPeriod({ span: 15, type: 'minute' })

getPeriod()

Get the chart period.

() => Period | null

Returns — Current Period, or null

Scroll and zoom

scrollByDistance(distance, animationDuration?)

Scroll by pixel distance.

(distance: number, animationDuration?: number) => void

Parameters

• distance — Pixel distance
• animationDuration — Animation duration in milliseconds (optional)

Returns — void

scrollToRealTime(animationDuration?)

Scroll to the latest bar.

(animationDuration?: number) => void

Returns — void

chartspire.getActiveChart()?.scrollToRealTime()

scrollToDataIndex(dataIndex, animationDuration?)

Scroll to a data index.

(dataIndex: number, animationDuration?: number) => void

Parameters

• dataIndex — Target data index
• animationDuration — Animation duration in milliseconds (optional)

Returns — void

scrollToTimestamp(timestamp, animationDuration?)

Scroll to a timestamp.

(timestamp: number, animationDuration?: number) => void

Parameters

• timestamp — Target timestamp
• animationDuration — Animation duration in milliseconds (optional)

Returns — void

zoomAtCoordinate(scale, coordinate?, animationDuration?)

Zoom at a pixel coordinate.

(
  scale: number,
  coordinate?: { x: number, y: number },
  animationDuration?: number
) => void

Parameters

• scale — Zoom scale
• coordinate — Pixel coordinate (optional)
• animationDuration — Animation duration in milliseconds (optional)

Returns — void

zoomAtDataIndex(scale, dataIndex, animationDuration?)

Zoom at a data index.

(scale: number, dataIndex: number, animationDuration?: number) => void

Parameters

• scale — Zoom scale
• dataIndex — Target data index
• animationDuration — Animation duration in milliseconds (optional)

Returns — void

chartspire.getActiveChart()?.zoomAtDataIndex(1.2, 100)

zoomAtTimestamp(scale, timestamp, animationDuration?)

Zoom at a timestamp.

(scale: number, timestamp: number, animationDuration?: number) => void

Parameters

• scale — Zoom scale
• timestamp — Target timestamp
• animationDuration — Animation duration in milliseconds (optional)

Returns — void

Indicators

createIndicator(indicator, isStack?)

Add an indicator to the chart. The indicator name must already be registered (built-in, or via Extension API registerIndicator).

(indicator: string | IndicatorCreate, isStack?: boolean) => string | null

See IndicatorCreate for the config object shape.

Parameters

• indicator — Indicator name, or IndicatorCreate config
• isStack — Whether to stack on an existing pane

Returns — Indicator id string, or null

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

getIndicators(filter?)

Get indicators on the chart.

(filter?: IndicatorFilter) => Indicator[]

See IndicatorFilter.

Parameters

• filter — Optional match by id, name, and/or pane

Returns — Indicator[]

overrideIndicator(indicator)

Update an indicator on the chart. Pass a partial IndicatorCreate — only the fields you want to change. Prefer id to target a specific instance.

(indicator: Partial<IndicatorCreate>) => boolean

Returns — boolean — Whether an indicator was updated

removeIndicator(filter?)

Remove indicators on the chart.

(filter?: IndicatorFilter) => boolean

See IndicatorFilter.

Parameters

• filter — Optional match by id, name, and/or pane. Omit to remove matching set per implementation defaults.

Returns — boolean — Whether an indicator was removed

Overlays

createOverlay(value)

Create an overlay / drawing on the chart.

(value: string | OverlayCreate | Array<string | OverlayCreate>) => string | null | Array<string | null>

See OverlayCreate.

Returns — Overlay id(s), or null

chartspire.getChart({ id: 'chart1' })?.createOverlay('segment')

getOverlays(filter?)

Get overlays on the chart.

(filter?: OverlayFilter) => Overlay[]

See OverlayFilter.

Parameters

• filter — Optional match by id, name, group, and/or pane

Returns — Overlay[]

overrideOverlay(overlay)

Update an overlay on the chart. Pass a partial OverlayCreate — only the fields you want to change. Prefer id to target a specific instance.

(overlay: Partial<OverlayCreate>) => boolean

Returns — boolean — Whether an overlay was updated

removeOverlay(filter?)

Remove overlays on the chart.

(filter?: OverlayFilter) => boolean

See OverlayFilter.

Parameters

• filter — Optional match by id, name, group, and/or pane

Returns — boolean — Whether an overlay was removed

Coordinates and export

convertToPixel(value, finder?)

Convert data values to pixel coordinates.

(
  value: {
    dataIndex?: number
    timestamp?: number
    value?: number
  } | Array<{
    dataIndex?: number
    timestamp?: number
    value?: number
  }>,
  finder?: {
    paneId?: string
    absolute?: boolean
  }
) => { x?: number, y?: number } | Array<{ x?: number, y?: number }>

Parameters

• value — Point or points to convert. If both dataIndex and timestamp exist, conversion uses the index.
• finder
  • paneId — Pane id
  • absolute — Absolute y-axis coordinates when true

Returns — Coordinate or coordinate array

convertFromPixel(coordinate, finder?)

Convert pixel coordinates to data values.

(
  coordinate: {
    x?: number
    y?: number
  } | Array<{
    x?: number
    y?: number
  }>,
  finder?: {
    paneId?: string
    absolute?: boolean
  }
) => {
  dataIndex?: number
  timestamp?: number
  value?: number
} | Array<{
  dataIndex?: number
  timestamp?: number
  value?: number
}>

Parameters

• coordinate — Pixel coordinate or coordinates
• finder
  • paneId — Pane id
  • absolute — Absolute y-axis coordinates when true

Returns — Point or point array

getConvertPictureUrl(includeOverlay?, type?, backgroundColor?)

Export the chart as an image data URL.

(
  includeOverlay?: boolean,
  type?: 'png' | 'jpeg' | 'bmp',
  backgroundColor?: string
) => string

Parameters

• includeOverlay — Include overlays when true
• type — Image type
• backgroundColor — Background color

Returns — Data URL string

const url = chartspire.getActiveChart()?.getConvertPictureUrl(true, 'png')

Related

• Widget API — theme, locale, timezone, getChart / getActiveChart
• Extension API — register custom overlays and indicators
• Widget API — constructor options