ChartIQ SDK Documentation

Class: MarketDepth

CIQ. MarketDepth

new MarketDepth(params)

Plug-in that adds a market depth plot and order book to the chart. Shows the volume of bids and asks.

See CIQ.ChartEngine#updateCurrentMarketData for data requirements.

Market Depth can be toggled using the Ctrl+Alt+D keystroke combination and L2 Heat Map using the Ctrl+Alt+H keystroke combination (see the marketDepth and l2HeatMap actions in hotkeyConfig.hotkeys in js/defaultConfiguration.js).

To enable this plug-in in examples/templated/sample-template-advanced.html or webpack-example/src/sample-template-webpack.js, search for "activetrader" and "Simulate L2 data" and uncomment the relevant markup or code. The templates can also serve as references for creating your own UI for this module.

Once you have created a CIQ.MarketDepth instance, use the display function to add or remove the market depth plot from the chart. See example.

For details on how to render a stand-alone market depth chart see CIQ.ChartEngine#drawMarketDepth.

img-marketDepth-plugin Figure. Chart with market depth plot and order book.

Parameters:

Name Type Description

params

object

Configuration parameters.

Properties

Name	Type	Argument	Default	Description
`stx`	CIQ.ChartEngine	<optional>		The chart object.
`volume`	boolean	<optional>		Set to true to include volume bars on the chart.
`mountain`	boolean	<optional>		Set to true to allow shading of the chart.
`tension`	number	<optional>	null	Splining tension for smooth curves around data points (range 0–1).
`height`	string	<optional>	150px	Height of market depth panel.
`yAxis`	object	<optional>		Y-axis parameters.
`precedingContainer`	object	<optional>		Set to the HTML element after which to insert the market depth chart. Defaults to last chart container's parent.
`orderbook`	object \| boolean	<optional>		Set to the HTML element that is the order book container to make the order book appear within the market depth area. For example, `document.querySelector("cq-orderbook")`. To use the default order book, set this parameter to true.
`record`	boolean	<optional>		Set to true to record the market depth data. Updating `currentMarketData` also updates `masterData`. This is useful when rendering historical market depth. Note: This may be memory intensive. The market depth plug-in's recording property is set to this value. This can be turned on or off on the fly by calling `stxx.marketDepth.setRecorder(true\|false)`.
`heatmapSize`	boolean	<optional>		Set to true to show the size of each block in the L2 heat map, provided the blocks are tall enough to contain text.
`heatmapBlockHeight`	number	<optional>		Height of heat map block. Default is `Math.pow(10, 1 - self.chart.yAxis.printDecimalPlaces)`.
`headsUp`	boolean	<optional>		Set to show crosshairs data in a box next to the crosshairs instead of on the axis. Using this option allows the display of the custom fields within the BidL2 and AskL2 arrays from the data set.
`interaction`	boolean	<optional>		Enables and disables interaction with the market depth chart. If true, UI controls appear on the chart, and the chart can be zoomed in and out by the controls and the mouse wheel. The yaxis may also be dragged. If false, the UI controls are hidden, and zooming with the mouse wheel is disabled.

Since:

6.1.0
6.2.0 Added record parameter.
6.3.0 Added heatmapSize and headsUp parameters.
7.0.0 Added heatmapBlockHeight parameter.
8.2.1 Added allowUIZoom parameter.
8.4.0 Renamed allowUIZoom parameter to interaction.

Example

// Instantiate a market depth plot with default parameters.
new CIQ.MarketDepth({ stx: stxx });

// Display the market depth plot.
stxx.marketDepth.display(true);
// or
stxx.layout.marketDepth = true;
stxx.changeOccurred("layout");

// Hide the market depth plot.
stxx.marketDepth.display(false);
// or
stxx.layout.marketDepth = false;
stxx.changeOccurred("layout");

Methods

display(on)

Shows and hides the market depth plot.

Parameters:

Name	Type	Description
`on`	boolean	If true, displays the market depth plot; if false, hides the plot.