IChartingLibraryWidget

Interface

The main interface for interacting with the library, returned by ChartingLibraryWidgetConstructor. For more information, refer to the Widget methods article.

Methods

activeChart

Get an API object for interacting with the active chart. For example, you can subscribe to events on the active chart, such as IChartWidgetApi.onIntervalChanged. Note that the library does not manage the event subscriptions when users switch between the charts on the multiple-chart layout. If necessary, you should manually unsubscribe from the previous chart and subscribe to the newly selected one. To track the currently active chart, use the SubscribeEventsMap.activeChartChanged event.

Signature

activeChart() => IChartWidgetApi

Returns

An API object for interacting with the chart.

IChartWidgetApi

activeChartIndex

Get the index of the active chart in the layout.

Signature

activeChartIndex() => number

Returns

number.

number

addCustomCSSFile

Add a custom CSS file for the library to load.

Signature

addCustomCSSFile(url: string) => void

Parameters

Name	Type	Description
url	string	A url to the custom CSS file. Should be absolute or relative to the `static` folder.

Returns

void

applyOverrides

Apply overrides to the chart without reloading. See also ChartingLibraryWidgetOptions.overrides.

Signature

applyOverrides<TOverrides>(overrides: TOverrides) => void

Type parameters

Name	Type
`TOverrides`	extends `Partial`<`ChartPropertiesOverrides`>

Parameters

Name	Type	Description
overrides	TOverrides	An object of overrides to apply to the chart.

Returns

void

applyStudiesOverrides

Apply overrides to indicator styles and inputs without reloading. Refer to Indicator Overrides for more information. Overrides for built-in indicators are listed in StudyOverrides.

Signature

applyStudiesOverrides(overrides: object) => void

Parameters

Name	Type	Description
overrides	object	An object of overrides to apply to the studies.

Returns

void

changeTheme

Change the theme of the chart.

Signature

changeTheme(themeName: ThemeName, options?: ChangeThemeOptions) => Promise<void>

Parameters

Name	Type	Description
themeName	ThemeName	A theme name.
options?	ChangeThemeOptions	An optional object of options for the theme.

Returns

A promise that resolves when the theme has been changed.

Promise<void>

chart

Get an API instance that can be used to interact with a chart.

Signature

chart(index?: number) => IChartWidgetApi

Parameters

Name	Type	Description
index?	number	Zero based index of the chart.

Returns

An API instance.

IChartWidgetApi

chartsCount

Get the number of charts in the current layout.

Signature

chartsCount() => number

Returns

A count of the charts in the current layout.

number

clearUndoHistory

Clears the undo & redo history.

Warning: this should only be used in very specific cases where you have considered the UX implications. It is generally unexpected for the user that the undo history has been cleared.

An example of an acceptable use-case would be reusing a chart when switching pages / tabs on a Single Page Application, and presenting it to the user as a new chart.

Signature

clearUndoHistory() => void

Returns

void

closePopupsAndDialogs

Close all open context menus, pop-ups or dialogs.

Signature

closePopupsAndDialogs() => void

Returns

void

createButton

Create a button in the top toolbar. This should be called after headerReady has resolved.

Example

widget.headerReady().then(function() {
    var button = widget.createButton();
    button.setAttribute('title', 'My custom button tooltip');
    button.addEventListener('click', function() { alert("My custom button pressed!"); });
    button.textContent = 'My custom button caption';
});

Signature

createButton(options?: CreateHTMLButtonOptions) => HTMLElement

Parameters

Name	Type	Description
options?	CreateHTMLButtonOptions	A optional object of options for the button.

Returns

A HTMLElement you can customize.

HTMLElement

Create a button in the top toolbar. This should be called after headerReady has resolved. If the title option is provided then the title text will be shown in a tooltip on hover. If the onClick option is provided then the button will be clickable.

Signature

createButton(options?: CreateTradingViewStyledButtonOptions) => void

Parameters

Name	Type	Description
options?	CreateTradingViewStyledButtonOptions	A optional object of options for the button.

Returns

void

Create a button in the top toolbar. This should be called after headerReady has resolved.

Signature

createButton(options?: CreateButtonOptions) => HTMLElement

Parameters

Name	Type	Description
options?	CreateButtonOptions	A optional object of options for the button.

Returns

A HTMLElement if the useTradingViewStyle option if false . undefined if useTradingViewStyle is true .

HTMLElement

createDropdown

Add a custom dropdown menu to the top toolbar.

Example

widget.createDropdown(
    {
        title: 'dropdown',
        tooltip: 'tooltip for this dropdown',
        items: [
            {
                title: 'item#1',
                onSelect: () => {console.log('1');},
            },
            {
                title: 'item#2',
                onSelect: () => {widget.setSymbol('IBM', '1D');},
            },
            {
                title: 'item#3',
                onSelect: () => {
                    widget.activeChart().createStudy(
                        'MACD',
                        false,
                        false,
                        {
                            in_0: 14,
                            in_1: 30,
                            in_3: 'close',
                            in_2: 9
                        }
                    );
                },
            }
        ],
        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><g fill="none" stroke="currentColor"><circle cx="10" cy="10" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path stroke-linecap="square" d="M17.5 7.5l-7 13"/></g></svg>`,
    }
).then(myDropdownApi => {
    // Use myDropdownApi if you need to update the dropdown:
    // myDropdownApi.applyOptions({
    //     title: 'a new title!'
    // });

    // Or remove the dropdown:
    // myDropdownApi.remove();
});

Signature

createDropdown(params: DropdownParams) => Promise<IDropdownApi>

Parameters

Name	Type
params	DropdownParams

Returns

Promise<IDropdownApi>

crosshairSync

Only available in Trading Platform. Get a watched value that can be used to read/write/subscribe to the state of the crosshair sync between charts.

Example

widget.crosshairSync().setValue(true);

Signature

crosshairSync() => IWatchedValue<boolean>

Returns

A watched value of the state of the crosshair sync.

IWatchedValue<boolean>

currencyAndUnitVisibility

Get a watched value that can be used to read/write/subscribe to the state of the currency and unit visibility setting on the price scale.

Signature

currencyAndUnitVisibility() => IWatchedValue<VisibilityType>

Returns

A watched value of the state of the currency and unit visibility option.

IWatchedValue<VisibilityType>

customSymbolStatus

Get an API object for creating, and adjusting, custom status items to be displayed within the legend for the main series of each chart.

This can only be accessed when the chart has been created. (headerReady)

Signature

customSymbolStatus() => ICustomSymbolStatusApi

Returns

An API object for controlling additional custom status items within the legend area.

ICustomSymbolStatusApi

customThemes

Get a promise that resolves with an API object for interacting with the custom themes.

Signature

customThemes() => Promise<ICustomThemesApi>

Returns

An API object for interacting with the custom themes.

Promise<ICustomThemesApi>

dateFormat

Get a watched value that can be used to read/write/subscribe to the state of the date format.

Signature

dateFormat() => IWatchedValue<"dd MMM 'yy" | "MMM 'yy" | "MMM dd, yyyy" | "MMM yyyy" | "MMM dd" | "dd MMM" | "yyyy-MM-dd" | "yy-MM-dd" | "yy/MM/dd" | "yyyy/MM/dd" | "dd-MM-yyyy" | "dd-MM-yy" | "dd/MM/yy" | "dd/MM/yyyy" | "MM/dd/yy" | "MM/dd/yyyy">

Returns

A watched value of the state of the date format.

dateRangeSync

Only available in Trading Platform. Get a watched value that can be used to read/write/subscribe to the state of the date range sync between charts.

Example

widget.dateRangeSync().setValue(true);

Signature

dateRangeSync() => IWatchedValue<boolean>

Returns

A watched value of the state of the date range sync.

IWatchedValue<boolean>

drawOnAllChartsEnabled

Get a watched value that read/write/subscribe to the state of the 'draw on all charts' mode.

When enabled new drawings will be replicated to all charts in the layout and shown when the same ticker is selected.

Signature

drawOnAllChartsEnabled() => IWatchedValue<boolean>

Returns

IWatchedValue<boolean>

exitFullscreen

Set the chart into non-fullscreen mode (if it isn't already).

Signature

exitFullscreen() => void

Returns

void

getCSSCustomPropertyValue

Returns the current value for a CSS custom property.

Example:

const currentValue = widget.getCSSCustomPropertyValue('--my-theme-color');

Signature

getCSSCustomPropertyValue(customPropertyName: string) => string

Parameters

Name	Type	Description
customPropertyName	string	A string representing the CSS custom property name to be checked. It is expected that the name should start with a double hyphen ('--').

Returns

A string containing the value of the property. If not set, returns the empty string.

string

getIntervals

Get an array of supported intervals (resolutions).

Signature

getIntervals() => string[]

Returns

An array of supported intervals. E.g. ['1D', '5D', '1Y'] .

string[]

getLanguage

Get the configured locale of the widget. For example en, zh, ru.

Signature

getLanguage() => LanguageCode

Returns

A code representing the locale of the widget.

LanguageCode

getSavedCharts

Get a list of chart descriptions saved to the server for the current user.

Signature

getSavedCharts(callback: Function) => void

Parameters

Name	Type	Description
callback	(chartRecords: SaveLoadChartRecord[]) => void	A function called with an array of saved chart information as the first argument.

Returns

void

getStudiesList

Get an array of the names of all supported studies. These names can be used when calling IChartWidgetApi.createStudy.

Signature

getStudiesList() => string[]

Returns

An array of supported study names. E.g. ['Accumulation/Distribution', 'Accumulative Swing Index', 'Advance/Decline', ...] .

string[]

getStudyInputs

Get an array of information about indicator inputs, including their names. You need to know an input name to refer to this property in the code. For example, when you change an input value using the overrides. Consider the Input property section for more information.

Signature

getStudyInputs(studyName: string) => StudyInputInformation[]

Parameters

Name	Type	Description
studyName	string	The name of a study.

Returns

StudyInputInformation[]

getStudyStyles

Get information about indicator properties. You can use this information to refer to the properties in the code. For example, when you change property values using the overrides.

Note that getStudyStyles does not return actual property names but the indicator's metadata. Consider the Property path section for more information on how to refer to the properties.

Signature

getStudyStyles(studyName: string) => StudyStyleInfo

Parameters

Name	Type	Description
studyName	string	The name of a indicator.

Returns

StudyStyleInfo

getTheme

Get the current theme of the chart.

Example

console.log(widget.getTheme());

Signature

getTheme() => ThemeName

Returns

A theme name. The name of the current theme.

ThemeName

headerReady

A promise that resolves if and when the header is ready to be used.

Signature

headerReady() => Promise<void>

Returns

Promise<void>

hideAllDrawingTools

Get a watched value that can be used to read/write/subscribe to the state of the "Hide All Drawing Tools" button.

Signature

hideAllDrawingTools() => IWatchedValue<boolean>

Returns

A watched value of the state of the "Hide All Drawing Tools" button.

IWatchedValue<boolean>

intervalSync

Only available in Trading Platform. Get a watched value that can be used to read/write/subscribe to the state of the interval sync between charts.

Example

widget.intervalSync().setValue(true);

Signature

intervalSync() => IWatchedValue<boolean>

Returns

A watched value of the state of the interval sync.

IWatchedValue<boolean>

layout

Get the current chart layout type.

Signature

layout() => LayoutType

Returns

A string representation of the current layout type. E.g. '2h' for two charts split vertically.

LayoutType

layoutName

Get the name of the current chart layout. The return value will be undefined if the current layout has not been saved.

Signature

layoutName() => string

Returns

A string of the name of the current chart layout.

string

load

Loads the chart state from a object. This method is part of the low-level save/load API.

Signature

load(state: object, extendedData?: SavedStateMetaInfo) => void

Parameters

Name	Type	Description
state	object	A chart state object to load.
extendedData?	SavedStateMetaInfo	A optional object of information about the saved state.

Returns

void

loadChartFromServer

Load a saved chart from the server.

Signature

loadChartFromServer(chartRecord: SaveLoadChartRecord) => void

Parameters

Name	Type	Description
chartRecord	SaveLoadChartRecord	A chart information object (returned by getSavedCharts).

Returns

void

lockAllDrawingTools

Get a watched value that can be used to read/write/subscribe to the state of the "Lock All Drawing Tools" button.

Signature

lockAllDrawingTools() => IWatchedValue<boolean>

Returns

A watched value of the state of the "Lock All Drawing Tools" button.

IWatchedValue<boolean>

magnetEnabled

Get a watched value that can be used to read/write/subscribe to the state of the magnet.

Signature

magnetEnabled() => IWatchedValue<boolean>

Returns

A watched value of the state of the magnet.

IWatchedValue<boolean>

magnetMode

Get a watched value that can be used to read/write/subscribe to the state of the magnet mode.

Signature

magnetMode() => IWatchedValue<number>

Returns

A watched value of the state of the magnet mode.

IWatchedValue<number>

mainSeriesPriceFormatter

Get the price formatter for the main series. You can use this to format prices as the char

Signature

mainSeriesPriceFormatter() => INumberFormatter

Returns

INumberFormatter

navigationButtonsVisibility

Get a watched value that can be used to read/write/subscribe to the state of the navigation buttons.

Signature

navigationButtonsVisibility() => IWatchedValue<VisibilityType>

Returns

A watched value of the state of the navigation buttons.

IWatchedValue<VisibilityType>

news

Trading Platform only. Get a promise that resolves with an API object for interacting with the widgetbar (right sidebar) news widget.

Signature

news() => Promise<INewsApi>

Returns

An API object for interacting with the widgetbar (right sidebar) widget.

Promise<INewsApi>

onChartReady

The library will call callback when the chart is ready to be used.

Signature

onChartReady(callback: EmptyCallback) => void

Parameters

Name	Type	Description
callback	EmptyCallback	A function that will be called when the chart is ready to be used.

Returns

void

onContextMenu

The widget will call the callback function each time the widget wants to display a context menu. See also ChartingLibraryWidgetOptions.context_menu.

Example

widget.onChartReady(function() {
    widget.onContextMenu(function(unixtime, price) {
        return [{
            position: "top",
            text: "First top menu item, time: " + unixtime + ", price: " + price,
            click: function() { alert("First clicked."); }
        },
        { text: "-", position: "top" }, // Adds a separator between buttons
        { text: "-Paste" },             // Removes the existing item from the menu
        {
            position: "top",
            text: "Second top menu item 2",
            click: function() { alert("Second clicked."); }
        }, {
            position: "bottom",
            text: "Bottom menu item",
            click: function() { alert("Third clicked."); }
        }];
    });
});

Signature

onContextMenu(callback: Function) => void

Parameters

Name	Type	Description
callback	(unixTime: number, price: number) => ContextMenuItem[]	A function called with the time and price of the location on the chart that triggered the context menu. The array of objects returned will add or remove items from the context menu.

Returns

void

onGrayedObjectClicked

The library will call callback when a greyed-out drawing tool or study is clicked.

Signature

onGrayedObjectClicked(callback: Function) => void

Parameters

Name	Type	Description
callback	(obj: GrayedObject) => void	A function that will be called when a greyed-out drawing tool or study is clicked.

Returns

void

onShortcut

The library will call callback when the shortCut keys are input.

Use a string separated by '+' for shortcuts using an alphabet character (A to Z) with optional modifiers (ctrl, shift, alt). Use a number for shortcuts using non-alphabet character without modifiers. If you don't know the key code you need you can use resources like keycode.info, or MDN to check. Use an array of literal key codes and modifier strings for shortcuts using non-alphabet characters with optional modifier strings.

Example

widget.onShortcut("alt+q", function() {
  widget.chart().executeActionById("symbolSearch");
});

// F1
widget.onShortcut(112, function() {
  widget.chart().executeActionById("symbolSearch");
});

// ctrl+shift+\
widget.onShortcut(['ctrl', 'shift', 220], function() {
     widget.chart().executeActionById("symbolSearch");
});

Signature

onShortcut(shortCut: string | number | (string | number)[], callback: EmptyCallback) => void

Parameters

Name	Type	Description
shortCut	string \| number \| (string \| number)[]	A number, a string, or an array of number and string.
callback	EmptyCallback	A function that will be called when the `shortCut` keys are input.

Returns

void

paneButtonsVisibility

Get a watched value that can be used to read/write/subscribe to the state of the pane buttons.

Signature

paneButtonsVisibility() => IWatchedValue<VisibilityType>

Returns

A watched value of the state of the pane buttons.

IWatchedValue<VisibilityType>

remove

Remove the widget and all its data from the page. The widget cannot be interacted with after it has been removed.

Signature

remove() => void

Returns

void

removeChartFromServer

Remove a saved chart from the server.

Signature

removeChartFromServer(chartId: string | number, onCompleteCallback: EmptyCallback) => void

Parameters

Name	Type	Description
chartId	string \| number	A chart ID from a SaveLoadChartRecord (returned by getSavedCharts).
onCompleteCallback	EmptyCallback	A callback function called when the chart is successfully saved.

Returns

void

resetLayoutSizes

Resets the sizes of all charts within a multiple-chart layout back to their initial default values. This action redistributes the space equally among all charts to ensure consistency in layout design.

Signature

resetLayoutSizes(disableUndo?: boolean) => void

Parameters

Name	Type	Description
disableUndo?	boolean	When set to true, the reset action is not added to the undo stack. Hence, the user cannot undo the reset operation.

Returns

void

save

Saves the chart state to a object. This method is part of the low-level save/load API.

Signature

save(callback: Function, options?: SaveChartOptions) => void

Parameters

Name	Type	Description
callback	(state: object) => void	A function called with the chart state as the first argument.
options?	SaveChartOptions	Options for customising the saved data.

Returns

void

saveChartToServer

Save the current chart to the server.

Signature

saveChartToServer(onComplete?: EmptyCallback, onFail?: Function, options?: SaveChartToServerOptions) => void

Parameters

Name	Type	Description
onComplete?	EmptyCallback	An optional callback function called when the chart is successfully saved.
onFail?	(error: SaveChartErrorInfo) => void	An optional callback function called when the chart fails to save.
options?	SaveChartToServerOptions	An optional object of options for saving the chart.

Returns

void

selectLineTool

Select an icon. It's the same as clicking on the corresponding button in the left toolbar.

Signature

selectLineTool(linetool: "icon", options?: IconOptions) => void

Parameters

Name	Type	Description
linetool	"icon"	An icon drawing tool.
options?	IconOptions	An optional object with options.

Returns

void

Select a drawing or a cursor. It's the same as clicking on the corresponding button in the left toolbar.

Signature

selectLineTool(linetool: Omit<"icon", SupportedLineTools>) => void

Parameters

Name	Type	Description
linetool	Omit<"icon", SupportedLineTools>	A drawing or cursor to select (excluding 'icon')

Returns

void

Select the Icon line tool. It's the same as clicking on the corresponding button in the left toolbar.

Signature

selectLineTool(linetool: "icon", options?: IconOptions) => void

Parameters

Name	Type	Description
linetool	"icon"	Icon line tool.
options?	IconOptions	An optional object with options. Currently only used for the 'icon' drawing.

Returns

void

Select the Emoji line tool. It's the same as clicking on the corresponding button in the left toolbar.

Signature

selectLineTool(linetool: "emoji", options?: EmojiOptions) => void

Parameters

Name	Type	Description
linetool	"emoji"	Emoji line tool.
options?	EmojiOptions	Options for the Emoji line tool

Returns

void

Select a drawing, icon, or a cursor. It's the same as clicking on the corresponding button in the left toolbar.

Signature

selectLineTool(linetool: SupportedLineTools, options?: EmojiOptions | IconOptions) => void

Parameters

Name	Type	Description
linetool	SupportedLineTools	A drawing or cursor to select.
options?	EmojiOptions \| IconOptions	An optional object with options.

Returns

void

selectedLineTool

Get the currently selected drawing or cursor.

Signature

selectedLineTool() => SupportedLineTools

Returns

An identifier for drawing or cursor.

SupportedLineTools

setActiveChart

Set which chart is currently active. It is recommended that this method is only used when linked to a user action which should change the active chart.

Use chartsCount to determine the number of charts currently available. If an invalid index is supplied (less than zero, or greater than the number of charts minus 1) then this method will not change the active chart.

Signature

setActiveChart(index: number) => void

Parameters

Name	Type	Description
index	number	index of chart to set as the active chart. Index is zero-based.

Returns

void

setCSSCustomProperty

Sets the value for a CSS custom property.

Example:

widget.setCSSCustomProperty('--my-theme-color', '#123AAA');

Signature

setCSSCustomProperty(customPropertyName: string, value: string) => void

Parameters

Name	Type	Description
customPropertyName	string	A string representing the CSS custom property name. It is expected that the name should start with a double hyphen ('--').
value	string	A string containing the new property value.

Returns

void

setDebugMode

Enable or disable writing detailed Datafeed API logs into the browser console.

Signature

setDebugMode(enabled: boolean) => void

Parameters

Name	Type	Description
enabled	boolean	A boolean flag. `true` to enable debug mode, `false` to disable.

Returns

void

setLayout

Set the current chart layout type.

Params

layout A string representation of the new layout type. E.g. '2h' for two charts split vertically.

Signature

setLayout(layout: LayoutType) => void

Parameters

Name	Type
layout	LayoutType

Returns

void

setSymbol

Set the symbol and resolution of the active chart.

Signature

setSymbol(symbol: string, interval: ResolutionString, callback: EmptyCallback) => void

Parameters

Name	Type	Description
symbol	string	A symbol to load.
interval	ResolutionString	A interval (resolution) to load.
callback	EmptyCallback	A callback. Called when the symbol's data has finished loading.

Returns

void

showConfirmDialog

Show a dialog with custom title and text along with "OK" and "CANCEL" buttons.

Signature

showConfirmDialog(params: DialogParams<Function>) => void

Parameters

Name	Type	Description
params	DialogParams<(confirmed: boolean) => void>	A object of options for the created dialog.

Returns

void

showLoadChartDialog

Show the "Load Chart Layout" dialog.

Signature

showLoadChartDialog() => void

Returns

void

showNoticeDialog

Show a dialog with custom title and text along with an "OK" buttons.

Signature

showNoticeDialog(params: DialogParams<Function>) => void

Parameters

Name	Type	Description
params	DialogParams<() => void>	A object of options for the created dialog.

Returns

void

showSaveAsChartDialog

Show the "Copy Chart Layout" dialog.

Signature

showSaveAsChartDialog() => void

Returns

void

startFullscreen

Set the chart into fullscreen mode (if it isn't already).

Signature

startFullscreen() => void

Returns

void

Subscribe to library events.

Signature

subscribe<EventName>(event: EventName, callback: SubscribeEventsMap[EventName]) => void

Type parameters

Name	Type
`EventName`	extends keyof `SubscribeEventsMap`

Parameters

Name	Type	Description
event	EventName	A event to subscribe to.
callback	SubscribeEventsMap[EventName]	A callback that will be called when the event happens.

Returns

void

supportedChartTypes

This method returns a readonly WatchedValue (IWatchedValueReadonly) object that can be used to read/watch the current supported chart types (SeriesType) for an active chart.

The chart type is returned as a number. You can see which number corresponds to which chart type in the Overrides documentation for mainSeriesProperties.style.

Signature

supportedChartTypes() => IWatchedValueReadonly<ChartStyle[]>

Returns

IWatchedValueReadonly<ChartStyle[]>

symbolInterval

Get the symbol and interval of the active chart.

Signature

symbolInterval() => SymbolIntervalResult

Returns

SymbolIntervalResult

symbolSync

Only available in Trading Platform. Get a watched value that can be used to read/write/subscribe to the state of the symbol sync between charts.

Example

if (widget.symbolSync().value()) {
    // ...
}

Signature

symbolSync() => IWatchedValue<boolean>

Returns

A watched value of the state of the symbol sync.

IWatchedValue<boolean>

takeClientScreenshot

Create a snapshot of the chart and return it as a canvas. Use this method to implement your logic for taking snapshots.

Signature

takeClientScreenshot(options?: Partial<ClientSnapshotOptions>) => Promise<HTMLCanvasElement>

Parameters

Name	Type	Description
options?	Partial<ClientSnapshotOptions>	An optional object that customizes the returned snapshot.

Returns

A promise containing a HTMLCanvasElement of the snapshot.

Promise<HTMLCanvasElement>

takeScreenshot

Create a snapshot of the chart and upload it to the server. When it is ready callback functions subscribed to the 'onScreenshotReady' event using subscribe will be called. The URL of the snapshot will be passed as an argument to the callback function.

Signature

takeScreenshot() => void

Returns

void

timeHoursFormat

Get a watched value that can be used to read/write/subscribe to the state of the timeHours format.

Signature

timeHoursFormat() => IWatchedValue<TimeHoursFormat>

Returns

IWatchedValue<TimeHoursFormat>

timeSync

Only available in Trading Platform. Get a watched value that can be used to read/write/subscribe to the state of the time sync between charts.

Example

widget.timeSync().setValue(true);

Signature

timeSync() => IWatchedValue<boolean>

Returns

A watched value of the state of the time sync.

IWatchedValue<boolean>

undoRedoState

Get the state of the undo/redo stack.

Signature

undoRedoState() => UndoRedoState

Returns

UndoRedoState

unloadUnusedCharts

This method deletes non-visible charts from a multiple-chart layout.

When a user transitions from a layout with a larger number of charts to one with fewer charts, the unused chart APIs still exist behind the scenes. This inherent behavior allows the library to restore previously displayed charts.

If you prefer that additional charts are displayed as new, with no record of previous charts at the same position, you can use this method to delete all non-visible charts. It is most effective to run this method right after a layout change (one can subscribe to SubscribeEventsMap.layout_changed to know when this occurs).

Please ensure that any subscriptions or event listeners associated with the hidden charts are removed prior to invoking this method.

Signature

unloadUnusedCharts() => void

Returns

void

unsubscribe

Unsubscribe from library events.

Signature

unsubscribe<EventName>(event: EventName, callback: SubscribeEventsMap[EventName]) => void

Type parameters

Name	Type
`EventName`	extends keyof `SubscribeEventsMap`

Parameters

Name	Type	Description
event	EventName	A event to unsubscribe from.
callback	SubscribeEventsMap[EventName]	A callback to unsubscribe. Must be the same reference as a callback passed to subscribe.

Returns

void

watchList

Trading Platform only. Get a promise that resolves with an API object for interacting with the widgetbar (right sidebar) watchlist.

Example

const watchlistApi = await widget.watchList();
const activeListId = watchlistApi.getActiveListId();
const currentListItems = watchlistApi.getList(activeListId);
// append new section and item to the current watchlist
watchlistApi.updateList(activeListId, [...currentListItems, '###NEW SECTION', 'AMZN']);

Signature

watchList() => Promise<IWatchListApi>

Returns

An API object for interacting with the widgetbar (right sidebar) watchlist.

Promise<IWatchListApi>

watermark

Get an API object for adjusting the watermarks present on the charts. This can only be accessed when the chart is ready to be used. (onChartReady)

Signature

watermark() => IWatermarkApi

Returns

An API object for adjusting the watermark settings.

IWatermarkApi

widgetbar

Trading Platform only. Get a promise that resolves with an API object for interacting with the widgetbar (right sidebar).

Signature

widgetbar() => Promise<IWidgetbarApi>

Returns

An API object for interacting with the widgetbar (right sidebar).

Promise<IWidgetbarApi>

Methods​

activeChart​

Signature​

Returns​

activeChartIndex​

Signature​

Returns​

addCustomCSSFile​

Signature​

Parameters​

Returns​

applyOverrides​

Signature​

Type parameters​

Parameters​

Returns​

applyStudiesOverrides​

Signature​

Parameters​

Returns​

changeTheme​

Signature​

Parameters​

Returns​

chart​

Signature​

Parameters​

Returns​

chartsCount​

Signature​

Returns​

clearUndoHistory​

Signature​

Returns​

closePopupsAndDialogs​

Signature​

Returns​

createButton​

Signature​

Parameters​

Returns​

Signature​

Parameters​

Returns​

Signature​

Parameters​

Returns​

createDropdown​

Signature​

Parameters​

Returns​

crosshairSync​

Signature​

Returns​

currencyAndUnitVisibility​

Signature​

Returns​

customSymbolStatus​

Signature​

Returns​

customThemes​

Signature​

Returns​

dateFormat​

Signature​

Returns​

dateRangeSync​

Signature​

Returns​

drawOnAllChartsEnabled​

Signature​

Returns​

exitFullscreen​

Signature​

Returns​

getCSSCustomPropertyValue​

Signature​

Parameters​

Returns​

getIntervals​

Methods

activeChart

Signature

Returns

activeChartIndex

Signature

Returns

addCustomCSSFile

Signature

Parameters

Returns

applyOverrides

Signature

Type parameters

Parameters

Returns

applyStudiesOverrides

Signature

Parameters

Returns

changeTheme

Signature

Parameters

Returns

chart

Signature

Parameters

Returns

chartsCount

Signature

Returns

clearUndoHistory

Signature

Returns

closePopupsAndDialogs

Signature

Returns

createButton

Signature

Parameters

Returns

Signature

Parameters

Returns

Signature

Parameters

Returns

createDropdown

Signature

Parameters

Returns

crosshairSync

Signature

Returns

currencyAndUnitVisibility

Signature

Returns

customSymbolStatus

Signature

Returns

customThemes

Signature

Returns

dateFormat

Signature

Returns

dateRangeSync

Signature

Returns

drawOnAllChartsEnabled

Signature

Returns

exitFullscreen

Signature

Returns

getCSSCustomPropertyValue

Signature

Parameters

Returns

getIntervals