Depth Chart

Depth Chart Type

ZingChart depth charts use the type attribute. In your chart object, add a type attribute and set the value to depth.

{
	type: 'depth'
}

Data

To enter data into the depth chart, use the series array. Each object in the series array requires a values array to function properly.

{ //shortened for brevity- click following depth chart demo to view full configuration
	series: [
		{
			values: [
				[1168.49, 0],
				[1164.69, 12.0211],
				[1163.38, 33.0049],
            ],
			text: 'Sell'
		},
		{
			values: [
				[1168.49, 0],
				[1172.22, 33.1932],
				[1174.28, 50.5177],               
            ],
			text: 'Buy'
		}
	]
}

Chart-Specific Properties

Configure your depth chart's currency symbol, title and subtitle, and mid-market price marker with the options object.

Currency

The currency attribute sets the character to precede monetary values with. Add any unicode currency symbol as a value. By default, the symbol displays as "$".

{
	"options":{
		"currency" : "£"
    }
}

Title and Subtitle

Style your depth chart's title with a title object. By default, the title displays the mid-market price value. To change this, add a text attribute with your your new title as its value.

To style the subtitle, use the subtitle object. By default, the subtitle displays: "Mid Market Price". To change this, add a text attribute with your your new subtitle as its value. To change the visibility of the subtitle, add a visible attribute with a value of true or false. The default is true.

{
	options: {
		title: {
		color: '#ffff00'
		//text: "title"
		},
		subtitle: {
			visible: false
			//text: "subtitle"
      },
	}
}

Mid Market Price Marker

Use the mmpMarker object to configure your mid-market price marker. By default, the marker label displays the mid market price value. To change this, add a text attribute with your your new label as its value.

{
	options: {
		mmpMarker: {
			alpha: 0.75,
			lineColor: '#999',
			label: {
				color: '#fff',
				fontSize: 15,
				offsetY: 20
			}
		}
	}
}

Zoom Buttons

Use the buttonZoomin and buttonZoomout objects to configure the zoom-in and zoom-out buttons.

{
	options: {
		buttonZoomin: {
			borderColor: 'red',
      borderWidth: 4,
		}
	}
}

Further Customization

You can also use the options object to style your chart.

Palette

The palette attribute defines a custom palette for the highest and lowest buy prices, respectively . Provide a string of two comma separated color, HEX, or RGB values. The first value represents the high buy prices and the second value represents the low buy prices.

{
  options: {
    palette: ['#69f0ae', '#e040fb'] //['high price color, low price color']
  }
}