API Reference

Class: MarketDepth

CIQ.Renderer. MarketDepth

new MarketDepth(config)

Creates a market depth renderer.

See CIQ.Renderer#construct for parameters required by all renderers

This renderer has three unique config options: step, mountain, and volume, all of which are independent of each other.

  • step If set, will draw the connections between the data points as steps rather than curved lines.
  • mountain If set, will shade in the area under the plots rather than just drawing the line.
  • volume If set, will draw a histogram at each data point for which there is volume.

This renderer does not allow panning interaction with the chart.

Requires Active Trader plugin. See CIQ.ChartEngine#updateCurrentMarketData for data requirements

See CIQ.ChartEngine#drawMarketDepth for color parameters and usage examples.

Here is sample jsfiddle illustrating how to render a stand alone Market Depth chart:

Name Type Description
config object

Config for renderer

Name Type Argument Description
params object <optional>

Parameters to control the renderer itself

Name Type Argument Description
type string <optional>

Type of rendering "marketdepth"

step boolean <optional>

If 'true' the bid and ask lines will not be curved but rather take the same of a step chart.

mountain boolean <optional>

If 'true', bid and ask curve lines will be shaded resembling mountain charts.

volume boolean <optional>

If 'true', volume bars will be drawn.

headsUp boolean <optional>

If 'true' crosshair information will be displayed in a box next to the crosshair rather than on axes.

  • ChartIQ Active Trader Package
  • 6.1.0
  • 6.3.0 Added headsUp parameter.


displayPrice(stx, context, style, price, spread)

Displays the current price and the spread on the top center section of the chart.

This function may be overridden to customize the price display. To suppress the display simply override this function to do noting but return.

Note: Only called if 'Last' price is included on data object.

Name Type Description
stx CIQ.ChartEngine

Chart engine object

context external:CanvasRenderingContext2D

HTML5 canvas context

style object

css style to display price (font and lineHeight)

price string

last price

spread string

bid-ask distance

  • ChartIQ Active Trader Package
  • 6.3.0


This is the default function

CIQ.Renderer.MarketDepth.displayPrice = function (stx, context, style, price, spread) {
	var width = stx.chart.width;
	context.textAlign = "center";
	context.fillStyle = style.color;
	context.font =
		style.fontStyle +
		" " +
		style.fontVariant +
		" " +
		style.fontWeight +
		" " +
		style.fontSize +
		"/" +
		style.lineHeight +
		" " +
		style.fontFamily.replace(/"/g, "");
	context.fillText(price, width / 2, 30);
	if (spread.length) context.fillText(stx.translateIf("Spread") + ": " + spread, width / 2, 60);

This example disables the display of the price box

CIQ.Renderer.MarketDepth.displayPrice = function (stx, context, style, price, spread) {