Skip to main content

Depth of Market

Overview​

The Depth of Market (DOM) widget allows users to see the volume of bids and asks for an asset at different prices. The widget supports frequent data updates, giving users a comprehensive view of supply and demand.

DOM widget
tip

You can find more information about interacting with the widget's UI in the Depth of Market: what it is and how traders can use it article.

Connect widget​

info

This widget is part of the Trading Platform. Trading on the platform relies on two key components: the Broker API and the Trading Host. Before implementing this widget, ensure that you have implemented the required Broker API methods. We recommend reading the Core concepts section for a better understanding.

1. Provide data​

The DOM widget displays data in static mode. This means that the price series is fixed, while the current price moves within, above, or below the designated range.

The widget sources its data from the DatafeedQuoteValues and DOMData objects. To provide this data, you need to implement the following Datafeed API methods:

2. Enable the widget​

  1. Add the dom_widget featureset to the enabled_features array of the Widget Constructor object.
  2. Set the supportLevel2Data flag, which enables Level 2 data, to true. Refer to the Trading features configuration section for more information about configuration flags.
  3. Implement the cancelOrders method within your Broker API implementation. This method is required for the DOM widget.

Example​

The CodePen example below demonstrates how to enable the DOM widget in the UI and implement subscribeDepth and unsubscribeDepth to populate the DOM with fake data.

Since the DOM is supported only on larger viewports, it will not be displayed within the iframe below. We recommend clicking the Edit on CodePen button to view the full example on CodePen, where the DOM widget is visible. To open the DOM, click the Trade button in the Account Manager.

Display DOM on start​

If you want to display the DOM widget when a user opens the chart for the first time, add the show_dom_first_time featureset to the enabled_features array of the Widget Constructor object.