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 Terminal, 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.
Parameters
The following parameters relate to Advanced Charts and Trading Terminal.
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 your own translation function. |
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. |
Studies and Drawings
Use the parameters below to customize studies (indicators) and drawing tools:
| Parameter | Description |
|---|---|
study_count_limit | Maximum amount of studies on the chart of a multichart 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. |
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
| Parameter | Description |
|---|---|
symbol_search_request_delay | A threshold delay in milliseconds that is used to reduce the number of symbol search requests when the user is typing a name of a symbol in the search box. |
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 Terminal Parameters
All Trading Terminal parameters are listed in the TradingTerminalWidgetOptions interface. Most of them duplicate the [Advanced Charts(#charting-library-parameters) parameters. Additional parameters are listed below:
| Parameter | Description |
|---|---|
broker_config | Configuration flags for Trading Terminal. |
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. |
news_provider | Use this property to set your own news getter function. |
trading_customization | Overrides orders and positions. |