Widget-Constructor

You may specify Charting library widget parameters when calling its constructor. E.g., your call may look like

new TradingView.widget({
    symbol: 'A',
    interval: 'D',
    timezone: "America/New_York",
    container_id: "tv_chart_container",
    locale: "ru",
    datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com")
});

Find full supported parameters list below. Please remember that changing those parameters after chart is initialized does not work. If you want to change the state of a chart after it was initialized, use [[Widget methods|Widget-Methods]] instead.

Properties marked :chart: are available in [[Trading Terminal]] only.

symbol, interval [mandatory]

Initial symbol & interval of your chart. Format of interval is described in another [[article|Resolution]].

timeframe

Sets initial timeframe for the chart. Timeframe is period of bars that will be loaded and shown on a screen.
Valid timeframe is a number with letter D for days and M for months.

container_id [mandatory]

id attribute of a DOM element you want to contain the widget.

datafeed [mandatory]

JavaScript object implementing appropriate interface ([[JS API|JS-Api]]) to feed the chart width data.

timezone

Initial timezone of the chart. Numbers on time scale depend on this timezone.
See [[supported timezones list|Symbology#timezone]] for available values. Set it to exchange to use the exchange timezone. For overriding default value you should use [[overrides|Widget-Constructor#overrides]] section

debug

Setting this property to true makes the chart to write detailed API logs to console. Feature charting_library_debug_mode is a synonym for this field usage.

library_path

A path to static folder

width, height

The desired size of a widget. Please make sure the widget has enough space to look smart.

Remark: if you want the chart to occupy all the available space, do not use '100%' in those field. Use fullscreen parameter instead (see below). It's because of issues with DOM nodes resizing in different browsers.

fullscreen <false>

Boolean value showing whether chart should occupy all the available space in the window.

autosize <false>

Boolean value showing whether chart should occupy all the available space in the container and resize with it is resized. This parameter is introduced in version 1.3.

symbol_search_request_delay

Delay in milliseconds to wait after key is pressed before making a symbol search request.

auto_save_delay

Delay in seconds to wait before onAutoSaveNeeded can be called again.
This parameter is introduced in version 1.5.

toolbar_bg

Toolbars background color

study_count_limit

Since 1.5 version.

Maximum amount of studies on a chart or multichart layout. Minimum value is 2.

studies_access

version: 1.1
An object with following structure:

{
    type: "black" | "white",
    tools: [
        {
            name: "<study name>",
            grayed: true
        },
        < ... >
    ]
}
  • type is a type of list. Supported values: black (all the listed items should be disabled), white (only the listed items should be enabled).
  • tools is an array of objects. Each object could have following properties:
    • name (mandatory) is the name of a study. Use the same names as you can see them in Indicators widget
    • grayed is a boolean showing whether this study should be visible but look like it's disabled. If the study is grayed and user clicks it, then onGrayedObjectClicked is called.

drawings_access

version: 1.1
This property has the same structure as the studies_access described above. Use the same names as you see them in UI.
Remark: There is a special case for font-based drawings. Use "Font Icons" name for them. This group is a special case and its drawings cannot be enabled or disabled particularly -- one can either enable or disable the whole group.

saved_data

JS object containing saved chart content (JSON, see save/load calls below). Use this parameter if you already have chart's JSON when creating chart. If you want to load chart content to chart that is already initialized then use loadData() widget method.

locale

Locale to be used by Charting Library. See [[Localization]] section for details.

numeric_formatting

The object containing formatting options for numbers. The only possible options is decimal_sign for now.
Example: numeric_formatting: { decimal_sign: "," }

customFormatters

It is an object that contains the following fields:

  1. timeFormatter
  2. dateFormatter

You can use these formatters to customize displaying of date and time values.
Both values are objects with functions format and formatLocal:

function format(date)
function formatLocal(date)

These functions should return text representing date or time. formatLocal should convert date and time to local timezone.

Example:

customFormatters: {
  timeFormatter: {
    format: function(date) { var _format_str = '%h:%m'; return _format_str.replace('%h', date.getUTCHours(), 2). replace('%m', date.getUTCMinutes(), 2). replace('%s', date.getUTCSeconds(), 2); }
  },
  dateFormatter: {
    format: function(date) { return date.getUTCFullYear() + '/' + date.getUTCMonth() + '/' + date.getUTCDate(); }
  }
}

overrides

The object containing default Widget properties overrides. Overriding a property means assigning a default value to it.
You can override most of Charting Library properties (which also may be edited by user through UI) using overrides parameter of Widget constructor. overrides supposed to be an object having range of fields. Each field name is a name of overridden property and the field value is the desired value for those property. Example:

overrides: {
    "symbolWatermarkProperties.color": "rgba(0, 0, 0, 0)"
}

This override will make the watermark 100% opaque (invisible). All customizable properties are listed in [[separate article|Overrides]]. Since 1.5 you can use [[Drawings-Overrides]].

disabled_features, enabled_features

The array containing names of features which should be enabled/disabled by default. Feature means a part of chart's functionality (more likely a part of UI/UX). Supported features are listed [[here|Featuresets]].
Example:

TradingView.onready(function()
{
    var widget = new TradingView.widget({
        /* .... */
        disabled_features: ["header_widget", "left_toolbar"],
    });
});

snapshot_url

experimental feature
URL for POST request with base64-encoded chart snapshots which will been sent when user press snapshot button. The service should return full URL to saved image in its response.

indicators_file_name

Path to file containing your compiled indicators. See more details [[here|Creating-Custom-Studies]].

preset

preset is a name of a set of pre-defined widget settings. All settings used by preset also may be used directly by you in widget's constructor. For now, the only mobile preset is supported. The example of this preset is available online.

studies_overrides

Use this option to customize default indicators' style or inputs. You can also customize Compare series' styles and inputs using this argument. See more details [[here|Studies-Overrides]]

time_frames

List of time frames visible in timeframes picker at the bottom of the chart. Example:

time_frames: [
    { text: "50y", resolution: "6M", description: "50 Years" },
    { text: "3y", resolution: "W", description: "3 Years", title: "3yr" },
    { text: "8m", resolution: "D", description: "8 Month" },
    { text: "3d", resolution: "5", description: "3 Days" },
    { text: "1000y", resolution: "W", description: "All", title: "All" },
]

Time frame is an object containing text and resolution property. Text must have following format: <integer><y|m|d> ( \d+(y|m|d) as Regex ). Resolution is a string having the common resolutions format. See [[this topic|Time-Frames]] to learn more about time frames.
The description property was added in 1.7 and it is displayed in the popup menu. This parameter is optional (if the time frame descriptor does not contain this property: title (if it is specified) or text is used).
The title property was added in 1.9 and this value will override default title generated from text property. This parameter is optional.

charts_storage_url, client_id, user_id

Those arguments are regarding high-level charts save/load. See more details [[here|Saving-and-Loading-Charts]].

charts_storage_api_version

A version of your backend. Supported values: "1.0" | "1.1". Study Templates are supported starting from 1.1

load_last_chart

Set this param to true if you want the library to load the last chart for a user (you also should have [save/load|Saving-and-Loading-Charts])

custom_css_url (since 1.4)

Adds your custom css to the chart. url should be absolute or relative path to 'static` folder

loading_screen (since 1.12)

Customization of the loading spinner. Value is an object with the following possible keys:

  • backgroundColor
  • foregroundColor

Example:

loading_screen: { backgroundColor: "#000000" }

favorites

Items which should be favored by default. This option requires disabling localstorage usage(see [[featuresets |Featuresets]] list to know more). favorites property expects to be an object. Following properties are supported:

  • intervals: an array of favored intervals. Example: ["D", "2D"]
  • chartTypes: an array of favored chart types. Chart types names are the same as you can see in chart's UI in english version. Example: ["Area", "Candles"].

save_load_adapter (since 1.12)

Object containing save/load functions. If it is set, it should have the following methods:

Chart layouts

  1. getAllCharts(): Promise<ChartMetaInfo[]>

    Function to get all saved charts.

    ChartMetaInfo is an object with the following fields:

    • id - unique id of the chart.
    • name - name of the chart.
    • symbol - symbol of the chart.
    • resolution - resolution of the chart.
    • timestamp - last modified date (number of milliseconds since midnight 01/01/1970 UTC) of the chart.
  2. removeChart(chartId): Promise<void>

    Function to remove a chart. chartId is unique id of the chart (see getAllCharts above).

  3. saveChart(chartData: ChartData): Promise<ChartId>

    Function to save a chart.

    ChartData is object with the following fields:

    • id - unique id of the chart (may be undefined if it wasn't save before).
    • name - name of the chart.
    • symbol - symbol of the chart.
    • resolution - resolution of the chart.
    • content - content of the chart.

    ChartId - unique id of the chart (string)

  4. getChartContent(chartId): Promise<ChartContent>

    Function to load chart from the server.

    ChartContent is a string with the chart content (see ChartData::content field in saveChart function).

Study Templates

  1. getAllStudyTemplates(): Promise<StudyTemplateMetaInfo[]>

    Function to get all saved study templates.

    StudyTemplateMetaInfo is an object with the following fields:

    • name - name of the study template.
  2. removeStudyTemplate(studyTemplateInfo: StudyTemplateMetaInfo): Promise<void>

    Function to remove a study template.

  3. saveStudyTemplate(studyTemplateData: StudyTemplateData): Promise<void>

    Function to save a study template.

    StudyTemplateData is an object with the following fields:

    • name - name of the study template.
    • content - content of the study template.
  4. getStudyTemplateContent(studyTemplateInfo: StudyTemplateMetaInfo): Promise<StudyTemplateContent>

    Function to load a study template from the server.

    StudyTemplateContent - content of the study template (string)

If both charts_storage_url and save_load_adapter are set - save_load_adapter will be used.

IMPORTANT: All functions should return a Promise (or Promise-like objects).

settings_adapter (since 1.11)

Object containing set/remove functions. Use it to save chart settings to your preferred storage, including server-side. If it is set, it should have the following methods:

  1. initialSettings: Object
    Object with initial settings

  2. setValue(key: string, value: string): void
    Function that is called to store key/value pair.

  3. removeValue(key: string): void
    Function that is called to remove a key.

:chart: Trading Terminal only

:chart: widgetbar

The object containing settings for widget bar on the right side of chart. Data window, watchlist and details tabs in right-side widget bar could be enabled using widgetbar field in Widget constructor:

widgetbar: {
    details: true,
    watchlist: true,
    watchlist_settings: {
        default_symbols: ["NYSE:AA", "NYSE:AAL", "NASDAQ:AAPL"],
        readonly: false
    }
}
  • details <false>: Enables details widget in right-side widget bar.
  • watchlist <false>: Enables watchlist widget in right-side widget bar.
  • watchlist_settings.default_symbols <[]>: Sets default symbols list for watchlist.
  • watchlist_settings.readonly: Enables read-only mode for the watchlist.

:chart: rss_news_feed

Use this property to change rss feed for news. You can set a different rss for each symbol type or use one rss for every symbols. The object should have default property, the other properties are optional; their names are equal to symbol types. Each property is an object (or array of objects) with the following properties:

  1. url - is an url to be requested. It can contain tags in curly braces which will be changed by the terminal: {SYMBOL}, {TYPE}, {EXCHANGE}.
  2. name of a feed is displayed at the bottom of every news

Here is an example:

{
    "default": [ {
        url: "https://articlefeeds.nasdaq.com/nasdaq/symbols?symbol={SYMBOL}",
        name: "NASDAQ"
      }, {
        url: "http://feeds.finance.yahoo.com/rss/2.0/headline?s={SYMBOL}&region=US&lang=en-US",
        name: "Yahoo Finance"
      } ]
}

Another example:

{
    "default": {
        url: "https://articlefeeds.nasdaq.com/nasdaq/symbols?symbol={SYMBOL}",
        name: "NASDAQ"
    }
}

One more example:

{
    "default": {
        url: "https://articlefeeds.nasdaq.com/nasdaq/symbols?symbol={SYMBOL}",
        name: "NASDAQ"
     },
    "stock": {
        url: "http://feeds.finance.yahoo.com/rss/2.0/headline?s={SYMBOL}&region=US&lang=en-US",
        name: "Yahoo Finance"
    }
}

:chart: news_provider

The object which represent a news provider. It may contain the following properties:

  1. is_news_generic - if true the title of the news widget will no have a symbol name (just Headlines). Otherwise for SYMBOL_NAME will be added.

  2. get_news - use this property to set own news getter function. symbol and callback will be passed to the function.

    The callback function should be called with an array of news objects with the following structure:

    1. title (required) - News item title.
    2. published (required) - News item time in ms (UTC).
    3. source (optional) - Title of news item source.
    4. shortDescription (optional) - Short description of a news item that will be displayed under the title.
    5. link (optional) - URL to the news story
    6. fullDescription (optional) - Full description (body) of a news item

    NOTE: When a user clicks on a news item a new tab with link URL will be opened. If link is not specified a dialog popup with fullDescription will be shown.

    NOTE 2: If it is set rss_news_feed will be ignored.

Example:

news_provider: {
    is_news_generic: true,
    get_news: function(symbol, callback) {
        callback([
            {
                title: 'It is news for symbol ' + symbol,
                shortDescription: 'Short description of the news item',
                fullDescription: 'Full description of the news item',
                published: new Date().valueOf(),
                source: 'My own news source',
                link: 'https://www.tradingview.com/'
            },
            {
                title: 'Another news for symbol ' + symbol,
                shortDescription: 'Short description of the news item',
                fullDescription: 'Full description of the news item. Very long long long long long long long long text.',
                published: new Date().valueOf(),
                source: 'My own news source',
            }
        ]);
    }
}

:chart: brokerFactory

Use this field to pass the function that constructs implementation of [[Broker API]]. This is a function that accepts [[Trading Host]] and returns [[Broker API|Broker API]].

:chart: brokerConfig

Use this field to set the configuration flags for the Trading Terminal. [[Read more|Broker API#tradingconfiguration]].

See Also

  • [[Customization Overview]]
  • [[Widget Methods]]
  • [[Featuresets]]
  • [[Saving and Loading Charts|Saving-and-Loading-Charts]]
  • [[Overriding Studies' Defaults|Studies-Overrides]]
  • [[Overriding Chart's Defaults|Overrides]]
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容

  • 周末的早晨,阳光斜斜的透过窗打在床前,我翻了个身,默默埋怨了一声昨晚忘记拉上的窗帘,一边用被子将自己捂了个严实。昨...
    罄歌阅读 512评论 0 2
  • 饭后,你拿出一本厚厚的故事书说要看书,我笑了,字还不认得几个,你看书?翻书就翻书,不要说看书好吗?你以翻书为乐,并...
    青云墨阅读 212评论 5 1
  • 文I一灯 步先生现今已过而立之年,他长得高大俊俏,姑娘们第一眼瞧见他,都恨不得嫁给他。可是相处一段时间后,就纷纷以...
    灯R阅读 402评论 0 1