API Reference

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.

Name Type Description
params object

Configuration parameters.

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>

Splining tension for smooth curves around data points (range 0–1).

height string <optional>

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.

  • 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.
// Instantiate a market depth plot with default parameters.
new CIQ.MarketDepth({ stx: stxx });

// Display the market depth plot.
// or
stxx.layout.marketDepth = true;

// Hide the market depth plot.
// or
stxx.layout.marketDepth = false;


viewRatio :number

Market depth chart view ratio. Specifies what fraction of the chart is viewable.

Can be set to any number, but sane values are between 0 and 1.

  • number
  • 8.2.1



Shows and hides the market depth plot.

Name Type Description
on boolean

If true, displays the market depth plot; if false, hides the plot.