newAdvancedChartWidget

newAdvancedChartWidget is a constructor function for creating the Advanced Chart widget.

Call newAdvancedChartWidget to create a widget instance inside a browser DOM element.

import { newAdvancedChartWidget } from '@dx-display/widgets-advanced-chart'

const domNode = document.getElementById('widget-container')
const dataProviders = {
    ipfPath: '/your-path/ipf',
    ipfAuthHeader: 'your-header',
    feedPath: 'wss://your-path/feed',
    feedAuthHeader: 'your-header',
    schedulePath: '/api/schedule'
}
const widget = newAdvancedChartWidget({
  element: domNode,
  providers: dataProviders,
})

Signature

newAdvancedChartWidget(props: WidgetConstructorProps): WidgetAPI

Returns

An WidgetAPI object.

WidgetConstructorProps

Name	Type	Description
element	HTMLElement	A DOM element where the widget should be attached.
providers	Providers	An object with configuration for data providers. Refer to the Data Providers section for details
config optional	Config	Initial configuration of the widget
state optional	State	Initial state of the widget
theme optional	ThemeName \| Theme	Initial theme of the widget. Refer to the Styling section for details

Gets the current widget config.

getConfig(): Config

Config

Sets widget config.

setConfig(config: Config): void

Name	Type	Description
config	Config	Configuration object. Omitted or undefined properties will be set to default

Gets the current widget state.

getState(): State

State

Updates widget state.

updateState(state: Partial<State>): void

Name	Type	Description
state	Partial<State>	State object. Merges with the previous state object.

Sets up a function that will be called whenever the state or specified field is changed.

addStateListener(stateChangeCallback: (state: State) => void): void
addStateListener(field: keyof State, fieldChangeCallback: (field: State[keyof State]) => void): void

Name	Type	Description
stateChangeCallback	`(state: State) => void`	Function that will be called whenever the state is changed.

Name	Type	Description
field	`keyof State`	The state field to listen for.
fieldChangeCallback	`(value: State[keyof State]) => void`	Function that will be called whenever the specified field is changed.

Removes an state listener previously registered with addStateListener

removeStateListener(stateChangeCallback: (state: State) => void): void
removeStateListener(field: keyof State, fieldChangeCallback: (field: State[keyof State]) => void): void

Name	Type	Description
stateChangeCallback	`(state: State) => void`	Listener that will be removed.

Name	Type	Description
field	`keyof State`	The state field for which to remove a listener.
fieldChangeCallback	`(value: State[keyof State]) => void`	Listener that will be removed.

Inserts custom markup into widget UI. Refer to the Extend widget UI section for details.

setSlot(slot: Slot, element: HTMLElement): void

Name	Type	Description
slot	Slot	The place where a provided element is inserted.
element	HTMLElement	An element that is inserted.

Sets widget theme.

setTheme(theme: Theme | ThemeName): void

Destroys the widget.

unmount(): void

Data Providers

The Data Providers object supplies the necessary information for connecting to data sources. This can either be:

Configuration details such as endpoint paths and authorization keys for seamless integration with dxFeed services.
A custom implementation of the required interface to connect the widget to your own data provider.

type AdvancedChartWidgetDataProviders = AdvancedChartProvidersConfig | AdvancedChartServices

AdvancedChartProvidersConfig

The AdvancedChartProvidersConfig object supplies an information about the endpoints required by the widget, such as the path to the endpoint and the authorization key.

interface AdvancedChartProvidersConfig {
  ipfPath: string
  ipfAuthHeader: string
  feedPath: string
  feedAuthHeader: string
  schedulePath: string
}

Properties

Name	Type	Description
ipfPath	`string`	A string containing the path to the endpoint.
ipfAuthHeader	`string`	A string containing the authentication header for the endpoint.
feedPath	`string`	A string containing the path to the endpoint.
feedAuthHeader	`string`	A string containing the authentication header for the endpoint.
schedulePath	`string`	A string containing the path to the endpoint.

AdvancedChartServices

The AdvancedChartServices object defines a set of methods used by the chart at runtime to fetch and manage the required data. It implements the following interface:

interface AdvancedChartServices {
  dataService: AdvancedChartDataService
}

The dataService is responsible for handling key data operations. You can read details about implementing AdvancedChartServices in dedicated page.

Configuration

Configuration is an object that defines the basic behavior of a widget and allows enabling or disabling widget features that cannot be configured within the widget's user interface.

Type

interface AdvancedChartWidgetConfig {
  toolbarDrawingsEnabled?: boolean,
  sidebarDrawingsEnabled?: boolean,
  timeframeEnabled?: boolean,
  timeframeEditEnabled?: boolean,
  timezoneEnabled?: boolean,
  availableAggregationPeriods?: AggregationPeriod[],
  availableChartTypes?: ChartType[],
  availablePriceLabels?: PriceLabel[],
  comparisonChartsEnabled?: boolean,
  indicatorSettingsEnabled?: boolean,
  indicatorTemplatesEnabled?: boolean,
  layoutEnabled?: boolean,
  layersEnabled?: boolean,
  availableSnapshotOptions?: SnapshotOption[],
  periodsEditEnabled?: boolean,
  availableContextMenus?: ContextMenu[],
  availableSettingsTabs?: TabIdentifier[],
  availablePriceTypes?: PriceType[],
  dataExportEnabled?: boolean,
  toolbarEnabled?: boolean,
  symbolSuggestEnabled?: boolean,
  maxDrawingsAmount?: number,
  maxStudiesAmount?: number,
  delayNotificationEnabled?: boolean,
  locale?: LocaleSettings,
}

Properties

Name	Type	Default	Description
toolbarDrawingsEnabled ^Optional	boolean	true	A flag that controls a visibility of a drawing menu in the toolbar.
sidebarDrawingsEnabled ^Optional	boolean	true	A flag that controls a visibility of a drawing menu in the sidebar.
timeframeEnabled ^Optional	boolean	true	A flag that controls a visibility of a timeframe menu
timeframeEditEnabled ^Optional	boolean	true	A flag that controls a visibility of a timeframe editor button.
timezoneEnabled ^Optional	boolean	true	A flag that controls a visibility of a timezone menu.
availableAggregationPeriods ^Optional	AggregationPeriod[]	[ {duration: 2, durationType: 't'}, {duration: 144, durationType: 't'}, {duration: 1, durationType: 'm'}, {duration: 5, durationType: 'm'}, {duration: 15, durationType: 'm'}, {duration: 30, durationType: 'm'}, {duration: 1, durationType: 'h'}, {duration: 2, durationType: 'h'}, {duration: 4, durationType: 'h'}, {duration: 1, durationType: 'd'}, {duration: 1, durationType: 'w'}, {duration: 1, durationType: 'mo'}, {duration: 1, durationType: 'y'}, {duration: 1, durationType: 'r'} ]	A list of available aggregation periods.
availableChartTypes ^Optional	ChartType[]	[ 'area', 'line', 'candle', 'bar', 'equivolume', 'heikinAshi', 'scatterPlot', 'hollow', 'histogram', 'baseline', 'trend' ]	A list of available chart types.
availablePriceLabels ^Optional	PriceLabel[]	[ 'bidAsk', 'prevDayClose', 'prePostMarket' ]	A list of available price labels in addition to symbol and indicator.
comparisonChartsEnabled ^Optional	boolean	true	A flag that controls a visibility of a compare charts button.
indicatorSettingsEnabled ^Optional	boolean	true	A flag that controls a visibility of an indicator settings button.
indicatorTemplatesEnabled ^Optional	boolean	true	A flag that controls a visibility of a indicator templates button.
layoutEnabled ^Optional	boolean	true	A flag that controls a visibility of a layout settings button.
layersEnabled ^Optional	boolean	true	A flag that controls a visibility of a layers settings button.
availableSnapshotOptions ^Optional	SnapshotOption[]	[ 'downloadImage' ]	A list of available snapshots.
periodsEditEnabled ^Optional	boolean	true	A flag that controls a visibility of a custom period input.
availableContextMenus ^Optional	ContextMenu[]	[ 'yAxisMenu', 'backgroundMenu', 'studiesMenu', 'drawingsMenu', 'legendMenu', 'dataMenu' ]	A list of available context menus.
availableSettingsTabs ^Optional	TabIdentifier[]	[ 'ChartGeneralTab', 'ChartTradingTab', 'ChartLegendTab', 'ChartScalesTab', 'ChartMarketTab', 'ChartColorsTab', 'ChartPaddingsTab' ]	A list of available settings tabs.
availablePriceTypes ^Optional	PriceType[]	[ 'mark', 'bid', 'ask', 'last' ]	A list of available price types.
dataExportEnabled ^Optional	boolean	true	A flag that controls a visibility of an export button.
toolbarEnabled ^Optional	boolean	true	A flag that controls a visibility of a toolbar.
symbolSuggestEnabled ^Optional	boolean	true	A flag that controls a visibility of selected symbol input.
maxDrawingsAmount ^Optional	number	9007199254740991	Maximum amount of drawings.
maxStudiesAmount ^Optional	number	5	Maximum amount of studies.
delayNotificationEnabled ^Optional	boolean	false	A flag that controls a visibility of an data delay notification.
locale ^Optional	LocaleSettings	{ language: 'en', dateLocale: 'en-GB', numberLocale: 'en-GB' }	An object that defines the language and regional settings of the widget.

State

State is an object that represents the state of the widget.

Type

interface AdvancedChartWidgetState {
  symbol?: string,
}

Properties

Name	Type	Default	Description
symbol ^Optional	string	undefined	A string containing the symbol by which the widget will display data.

Type Reference

Slot

Type

'header'

AggregationPeriod

Type

{
  duration: string,
  durationType: AggregationPeriodDurationType,
}

AggregationPeriodDurationType

Type

't' | 'r' | 's' | 'm' | 'h' | 'd' | 'w' | 'mo' | 'y' | 'v'

ChartType

Type

'area' | 'line' | 'candle' | 'bar' | 'equivolume' | 'heikinAshi' | 'scatterPlot' | 'hollow' | 'histogram' | 'baseline' | 'trend'

PriceLabel

Type

'bidAsk' | 'prevDayClose' | 'prePostMarket'

SnapshotOption

Type

'downloadImage'

ContextMenu

Type

'yAxisMenu' | 'backgroundMenu' | 'studiesMenu' | 'drawingsMenu' | 'legendMenu' | 'dataMenu'

TabIdentifier

Type

'ChartGeneralTab' | 'ChartTradingTab' | 'ChartLegendTab' | 'ChartScalesTab' | 'ChartMarketTab' | 'ChartColorsTab' | 'ChartPaddingsTab'

PriceType

Type

'mark' | 'bid' | 'ask' | 'last'

MaxChartsAmount

Type

1 | 2 | 3 | 4 | 8

LocaleSettings

An object that defines the language and regional settings of the widget.

Type

{
  language: Language,
  dateLocale: string,
  numberLocale: string,
}

Language

Type

'en' | 'de' | 'ar'

Widget Constructor​

Signature​

Returns​

WidgetConstructorProps​

Widget API​

getConfig​

Signature​

Returns​

setConfig​

Signature​

Parameters​

getState​

Signature​

Returns​

updateState​

Signature​

Parameters​

addStateListener​

Signature​

Parameters​

removeStateListener​

Signature​

Parameters​

setSlot​

Signature​

Parameters​

setTheme​

Signature​

unmount​

Signature​

Data Providers​

AdvancedChartProvidersConfig​

Properties​

AdvancedChartServices​

Configuration​

Type​

Properties​

State​

Type​

Properties​

Type Reference​

Slot​

Type​

AggregationPeriod​

Type​

AggregationPeriodDurationType​

Type​

ChartType​

Type​

PriceLabel​

Type​

SnapshotOption​

Type​

ContextMenu​

Type​

TabIdentifier​

Type​

PriceType​

Type​

MaxChartsAmount​

Type​

LocaleSettings​

Type​

Language​

Type​

Widget Constructor

Signature

Returns

WidgetConstructorProps

Widget API

getConfig

Signature

Returns

setConfig

Signature

Parameters

getState

Signature

Returns

updateState

Signature

Parameters

addStateListener

Signature

Parameters

removeStateListener

Signature

Parameters

setSlot

Signature

Parameters

setTheme

Signature

unmount

Signature

Data Providers

AdvancedChartProvidersConfig

Properties

AdvancedChartServices

Configuration

Type

Properties

State

Type

Properties

Type Reference

Slot

Type

AggregationPeriod

Type

AggregationPeriodDurationType

Type

ChartType

Type

PriceLabel

Type

SnapshotOption

Type

ContextMenu

Type

TabIdentifier

Type

PriceType

Type

MaxChartsAmount

Type

LocaleSettings

Type

Language

Type