Skip to main content

Widget Options

sdk.chart.mount(options) creates either a single chart or a multi-chart workspace. Both variants return ChartSdkMount, whose api is the same ChartWidgetApi used by all widget-level services.

Pick a starting configuration below; every option used in the presets exists on ChartWidgetOptions.

Minimum preset​

Four required fields produce a working chart. Start here, verify the chart renders, then add options deliberately. See Quickstart and Datafeeds for the data contract.

import { createTradeScriptSdk } from '@tradescript/pro/sdk/core';

const sdk = await createTradeScriptSdk({ lease: deploymentLease });
const mounted = sdk.chart.mount({
  mount: '#chart',
  symbol: 'AAPL',
  interval: '1D',
  datafeed,
});

await mounted.ready();

Common preset​

Presentation, feature gates, persistence, and error reporting — the options most production embeds add first. See Customize the terminal, Themes, and Storage.

const mounted = sdk.chart.mount({
  mount: '#chart',
  symbol: 'AAPL',
  interval: '1D',
  datafeed,
  theme: 'dark',
  locale: 'en',
  timezone: 'America/New_York',
  features: {
    drawings: true,
    builtInIndicators: true,
    symbolSearch: true,
  },
  storage,        // ChartStorageAdapter for layouts, templates, settings
  autoSave: true, // debounced autosave-needed events
  onError: (error) => console.error(error.code, error.message),
});

await mounted.ready();

Advanced preset​

Broker-connected trading, alert persistence, worker-backed computation, and restored sessions. See Broker integration, Alerts, and Build a multi-chart workspace.

const mounted = sdk.chart.mount({
  mount: '#terminal',
  symbol: 'AAPL',
  interval: '1m',
  datafeed,
  broker,              // TradingBrokerAdapter for orders and positions
  alerts,              // AlertProvider for server-side alert evaluation
  storage,
  workers: true,       // SDK-packaged compute workers
  widgetBar: true,     // native right-rail pages
  loadLastChart: true, // restore the newest saved layout before ready
  onEvent: (event) => routeToAnalytics(event),
});

await mounted.ready();

For multiple synchronized charts in one workspace, replace the single-chart fields with multiChart — see Multi-chart configuration.

Required configuration​

Single-chart widgets require these fields:

OptionTypePurpose
mountstring | HTMLElementContainer that receives the widget
symbolstring | SymbolInfoInitial instrument
intervalChartIntervalInitial resolution, such as 1m or 1D
datafeedMarketDataFeedHistorical and realtime market data

Common optional configuration​

OptionPurpose
theme, locale, timezoneInitial presentation and regional settings
featuresEnables or configures supported product surfaces
storageConnects layout, drawing, template, and settings persistence
brokerConnects account state and trading intents
alertsConnects alert persistence and evaluation
defaultIndicatorsAdds indicators when the chart initializes
favoritesSets favorite intervals, chart types, tools, and indicators
accessibilityConfigures labels, announcements, and keyboard behavior
workersConfigures supported worker-backed computation
onReady, onEvent, onErrorReceives lifecycle, typed event, and structured error notifications

Browse every option and related type in the Widget API.

Multi-chart configuration​

Pass multiChart.charts instead of top-level symbol, interval, and datafeed fields:

const mounted = sdk.chart.mount({
  mount: '#workspace',
  multiChart: {
    charts: [
      { chartId: 'left', symbol: 'AAPL', interval: '1D', datafeed },
      { chartId: 'right', symbol: 'MSFT', interval: '1D', datafeed },
    ],
    activeChartId: 'left',
    sync: { crosshair: true, interval: true },
  },
});

await mounted.ready();
mounted.api.chart('right');

Top-level single-chart fields cannot be combined with multiChart. Invalid combinations throw an SdkError with code validation.

Return value​

sdk.chart.mount() returns a stable ChartSdkMount immediately. Await mounted.ready() before using chart data or controller methods, call mounted.update(...) for mutable host props, and access the mounted ChartWidgetApi through mounted.api. Use:

  • mounted.api.chart(chartId?) for chart operations
  • mounted.api.data(chartId?) for market-data operations
  • mounted.api.trading(chartId?) for broker-connected operations
  • mounted.api.customization(chartId?) for themes and overrides
  • mounted.api.chartLayouts() for saved chart layouts
  • mounted.api.workspace() for chart membership and active-chart state

Errors​

Construction validates the mount target, chart configuration, identifiers, and mutually exclusive single/multi-chart fields. Runtime failures are delivered through onError as structured ChartError values and are also available through rejected promises where applicable.

Direct single-chart shortcut​

Use createChart(mount, options) when a plain JavaScript application needs a direct ChartApi for one chart. Use createTradeScriptSdk({ lease }) and sdk.chart.mount() when the application needs shared services, multiple charts, or explicit lifecycle control.