Depth Chart

Overview

JavaScript depth charts allow you to convey information regarding the buying and selling of assets. A depth chart is split down the center indicating the price of the asset during the last trade. On the left and right sides are the highest sell price and the lowest buy price respectively. They indicate the best point to buy or sell to maximize profit. Much of this type of chart is preconfigured for ease of use.

Type

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

var depthData = {
    type: 'depth'
};

Data

To enter data into the depth chart, use the series array. Each object in the series array requires a value array to function properly. More information regarding the series array is available here.

https://app.zingsoft.com/demos/embed/BA399TC6
https://app.zingsoft.com/demos/embed/BA399TC6
var depthData = {
    backgroundColor: '#f3f3f3 #d9d9d9',
    type: 'depth',
    series: [
		{
			values: [
                ...,
            ],
			text: 'Sell'
		},
		{
			values: [
                ...,               
            ],
			text: 'Buy'
		}
	]
};

Summary

Got a question about how depth charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.