Widget Constructor

The Widget Constructor is the entry point to the library. It allows you to embed the library within your web page. You can use the Widget Constructor parameters to customize the widget's appearance and behavior. All parameters are listed in the ChartingLibraryWidgetOptions interface. If you use Trading Platform, you can specify some additional parameters.

The following video tutorial describes Widget Constructor parameters and demonstrates how to use them.

The code sample below shows how to adjust some basic parameters using Widget Constructor.

View Example on JSFiddle

Advanced Charts parameters

The following parameters relate to Advanced Charts and Trading Platform.

Widget configuration

Use the parameters below to configure basic widget settings:

Parameter	Description
container #	Represents either a reference to an attribute of a DOM element inside which the iframe with the chart will be placed or the HTMLElement itself.
library_path #	A path to a static folder.
debug #	Makes the chart write detailed API logs into the browser console.

Chart configuration

Use the parameters below to configure basic chart settings:

Parameter	Description
symbol #	The default chart symbol.
interval #	The default chart interval.
timeframe #	The default chart time frame.
time_frames #	The list of visible time frames that can be selected at the bottom of the chart.
timezone #	The default chart time zone.
locale #	The default chart locale.
favorites #	Items that should be marked as favorite by default.

Data configuration

Use the parameters below to connect data to the chart:

Parameter	Description
datafeed #	A JavaScript object that implements the IBasicDataFeed interface to supply the chart with data.
additional_symbol_info_fields #	An optional field containing an array of custom symbol info fields to be shown in the Symbol Info dialog.
snapshot_url #	A URL that is used to send a POST request with binary chart snapshots when a user presses the snapshot button.

Chart size

Use the parameters below to customize the chart size:

Parameter	Description
width #	The desired width of the widget.
height #	The desired height of the widget.
fullscreen #	A Boolean value showing whether the chart should use all the available space in the window.
autosize #	A Boolean value showing whether the chart should use all the available space in the container and resize when the container itself is resized.

UI customization

Use the parameters below to customize colors, fonts, price and date formats, and more:

Parameter	Description
toolbar_bg #	A background color of the toolbars.
theme #	The predefined custom theme color for the chart.
custom_css_url #	Adds your custom CSS to the chart.
custom_font_family #	Changes the font family used on the chart.
custom_formatters #	Custom formatters for adjusting the display format of price, date, and time values.
custom_translate_function #	Use this property to set custom translations for UI elements.
numeric_formatting #	An object that contains formatting options for numbers.
overrides #	Overrides values for the default widget properties.
settings_overrides #	An object that contains new values for values saved to the settings.
loading_screen #	An object that allows you to customize the loading spinner.
context_menu #	An object that allows you to customize the context menu.
time_scale #	An additional optional field to add more bars on screen.
header_widget_buttons_mode #	An additional optional field to change the look and feel of buttons on the top toolbar.

Chart features

If you want to change the chart's behavior or show/hide UI elements, you should use featuresets. The following parameters allow you to enable/disable a certain featureset:

Parameter	Description
enabled_features #	The array containing names of features that should be enabled by default.
disabled_features #	The array containing names of features that should be disabled by default.

Indicators and drawings

Use the parameters below to customize indicators (studies) and drawings:

Parameter	Description
study_count_limit #	Maximum amount of studies allowed at one time within the layout.
studies_access #	An object that allows you to specify indicators available for users.
studies_overrides #	Use this option to customize the style or inputs of the indicators. Refer to Indicator Overrides for more information.
custom_indicators_getter #	A function that returns the Promise object with the array of your custom indicators.
drawings_access #	An object that allows you to specify drawing tools available for users.

Symbol search and comparison

Use the parameters below to customize the Symbol Search:

Parameter	Description
symbol_search_request_delay #	A threshold delay in milliseconds that is used to reduce the number of search requests when the user enters the symbol name in the Symbol Search.
symbol_search_complete #	Takes an additional search result object parameter, and returns an additional human-friendly symbol name.
compare_symbols #	An array of custom compare symbols for the Compare window.

Saving and loading chart

Specify the following parameters to save/load a chart using the predefined REST API:

Parameter	Description
charts_storage_url #	Sets the storage URL endpoint for use with the high-level saving / loading charts API.
charts_storage_api_version #	A version of your backend. Supported values are: '1.0' | '1.1'.
client_id #	Sets the client ID for the high-level saving/loading charts API.
user_id #	Sets the user ID for the high-level saving/loading charts API.

Specify the following parameters to save/load a chart using the low-level API:

Parameter	Description
auto_save_delay #	A threshold delay in seconds that is used to reduce the number of onAutoSaveNeeded calls.
saved_data #	An object containing saved chart content.
saved_data_meta_info #	An object containing saved chart content meta info.
load_last_chart #	A Boolean value showing whether the library should load the last saved chart for a user.

Specify the save_load_adapter parameter to save/load a chart using the API handlers.

Specify the settings_adapter parameter to save chart settings and set a watermark.

Trading Platform parameters

All Trading Platform parameters are listed in the TradingTerminalWidgetOptions interface. Most of them duplicate the Advanced Charts parameters. Additional parameters are listed below:

Parameter	Description
broker_config #	Configuration flags for Trading Platform. Refer to Trading features configuration for more information.
restConfig #	Connection configuration settings for the Broker API.
widgetbar #	Settings for the widget panel on the right side of the chart. You can enable Watchlist, News, Details and Data Window widgets on the right side of the chart using this property.
rss_news_feed #	Use this property to change the RSS feed for news.
rss_news_title #	Use this property to change the title for news widget when using a RSS feed.
news_provider #	Use this property to set your own news getter function.
trading_customization #	Overrides orders and positions.