# 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. :::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: - [`getQuotes`] - [`subscribeQuotes`] - [`unsubscribeQuotes`] - [`subscribeDepth`] - [`unsubscribeDepth`] ### 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]. See the Pen Trading Platform. Implement Depth of Market by TradingView (@tradingview) on CodePen. ## 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. [Account Manager]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/account-manager.md [Broker API]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts.md#broker-api [Core concepts]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts.md [Datafeed API]: https://charting-library-docs.xstaging.tv/latest/connecting_data/datafeed-api.md [Depth of Market: what it is and how traders can use it]: https://www.tradingview.com/support/solutions/43000516459-depth-of-market-dom-what-it-is-and-how-traders-can-use-it/ [Level 2]: https://www.investopedia.com/terms/l/level2.asp [Trading features configuration]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts/trading-features-configuration.md [Trading Platform]: https://charting-library-docs.xstaging.tv/latest/trading_terminal.md [Widget Constructor]: https://charting-library-docs.xstaging.tv/latest/configuration/Widget-Constructor.md [`cancelOrders`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerTerminal#cancelorders [`dom_widget`]: https://charting-library-docs.xstaging.tv/latest/customization/Featuresets.md#dom_widget [`enabled_features`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.ChartingLibraryWidgetOptions#enabled_features [`getQuotes`]: https://charting-library-docs.xstaging.tv/latest/connecting_data/datafeed-api/trading-platform-methods.md#getquotes [`show_dom_first_time`]: https://charting-library-docs.xstaging.tv/latest/customization/Featuresets.md#show_dom_first_time [`subscribeDepth`]: https://charting-library-docs.xstaging.tv/latest/connecting_data/datafeed-api/trading-platform-methods.md#subscribedepth [`subscribeQuotes`]: https://charting-library-docs.xstaging.tv/latest/connecting_data/datafeed-api/trading-platform-methods.md#subscribequotes [`supportLevel2Data`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.BrokerConfigFlags#supportlevel2data [`unsubscribeDepth`]: https://charting-library-docs.xstaging.tv/latest/connecting_data/datafeed-api/trading-platform-methods.md#unsubscribedepth [`unsubscribeQuotes`]: https://charting-library-docs.xstaging.tv/latest/connecting_data/datafeed-api/trading-platform-methods.md#unsubscribequotes [`DatafeedQuoteValues`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.DatafeedQuoteValues [`DOMData`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.DOMData --- ## Sitemap - [All documentation pages](https://charting-library-docs.xstaging.tv/llms.txt) - [Full page map with headings](https://charting-library-docs.xstaging.tv/docs_map.md)