Skip to main content

Chart

The native chart surface is ChartApi. Reach it through (await sdk.chart.mount(options).ready()).chart(), or directly from createChart(mount, options) in a plain-JavaScript host. Users see it as the central canvas: stacked panes with the main series, indicator sub-panes, the legend, and the price and time scales around it.

Anatomy​

Full TradeScript chart in light theme with top toolbar, symbol and indicator legend rows, left drawing toolbar, candlestick pane with EMA overlays, volume sub-pane, right price scale with last-price label, and bottom time scale

BTCUSDT · 15m · light theme — full widget chrome captured from the live playground.

Ten regions make up the default chart chrome:

  1. Top toolbar — symbol box, interval controls, and view/actions cluster. Configured through features and customization().setToolbar(...). See Toolbars.
  2. OHLCV strip and symbol identity row — current bar values, symbol logo, name, exchange, and interval. Configured through LegendSettings via customization().setLegend(...). See Legend.
  3. Drawing favorites row — the compact row of starred drawing tools under the legend. Placement is ChartDisplaySettings.favoritesToolbar ('legend' | 'sidebar' | 'floating' | 'both').
  4. Indicator legend row — EMA(5,10,20,30,60,120,close) with hide, settings, and remove controls. Indicators are managed with addBuiltInIndicator, addIndicator, getIndicators, and removeIndicator. See Indicators.
  5. Left drawing toolbar — tool families, magnet, visibility, and lock controls, gated by features.drawings. See Drawing Tools.
  6. Price pane — the main series (candles here; switch with setChartType) plus overlay indicator plots.
  7. Volume sub-pane — a separate pane with its own header controls. Pane placement and behavior are covered in Panes and Scales.
  8. Price scale — tick labels and the highlighted last-price label on the right, owned by PriceScaleSettings and ChartDisplaySettings. See Price Scale.
  9. Time scale — date/time labels and viewport navigation along the bottom. See Time Scale.
  10. Bottom-right pane controls — auto-fit and settings buttons, configured with ChartControlOptions.autoFitButton and ChartControlOptions.settingsButton under features.chartControls.

Ownership and readiness​

const mounted = sdk.chart.mount({ mount, symbol: 'AAPL', interval: '1D', datafeed });
const widget = await mounted.ready();

const chart = widget.chart();
await chart.setSymbol('MSFT');

mounted.destroy();

Use mounted.ready() before reading or changing the active chart. The host owns the mount and widget lifecycle; ChartApi owns chart state; data and broker adapters own external facts.

Current surface​

Chart capabilityTradeScript surfaceRelated page
Chart mountsdk.chart.mount(...) with mount, symbol, interval, and datafeedChart Widget
Full-window startupfullscreen: trueToolbars
Active chartwidget.chart() or workspace.chart(chartId)Multi-Chart Workspace
Symbol and intervalsetSymbol, getSymbol, setInterval, getIntervalSymbol Search Surface, Resolution
Visible rangesetVisibleRange, getVisibleRange, getVisibleBarRangeTime Scale
Data resetclearBars, then reload through symbol/interval/datafeedDatafeeds
IndicatorsaddBuiltInIndicator, addIndicator, getIndicators, removeIndicatorIndicators
DrawingscreateDrawing, listDrawings, updateDrawing, removeDrawingDrawing Tools
Actionscustomization().registerAction(...)Toolbars
SnapshotexportImage(...), uploadSnapshot(...)Snapshots
Timezonecustomization().setTimezone(...)Timezone Selector

ChartApi is the source of truth for chart state and interaction. Widget-level layout persistence is owned by widget.chartLayouts().