Version: latest

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.

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` #	A property 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` #	A storage URL endpoint.
`charts_storage_api_version` #	A version of your backend. Supported values are: `1.0` or `1.1`.
`client_id` #	A client ID that represents a user group.
`user_id` #	A user ID that uniquely identifies each user within a `client_id` group.

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 property to save/load a chart using the API handlers.

Specify the settings_adapter property to save user 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.

Advanced Charts parameters​

Widget configuration​

Chart configuration​

Data configuration​

Chart size​

UI customization​

Chart features​

Indicators and drawings​

Symbol search and comparison​

Saving and loading chart​

Trading Platform parameters​