Depth Chart JS Component: depth-chart.js

DepthChart.js is a versatile component designed to visualize market depth (Depth Of Market) data in asset trading platforms. Ideal for embedding alongside candlestick charts in stock, cryptocurrency, or other trading applications, this HTML Canvas-based tool offers interactive features like zooming and crosshair focus, with both dark/light themes and customization options.

1. Overview of DepthChart.js

Key features include:

Canvas-based implementation: Superior performance for large datasets compared to SVG alternatives.
Zero dependencies: Easily integrates with frameworks like jQuery, Vue, React, or Angular.
Interactive zooming: Horizontal scaling via mouse wheel for detailed data inspection.
Customizable themes: Pre-built dark/light themes plus flexibility to match existing UI designs.

2. Implementation Guide

STEP 1: Add Script Files

Include the Canvas element and library in your HTML:

<canvas id="depth-chart"></canvas>
<script src="uikit.umd.js"></script>

STEP 2: Prepare Data Structure

Market depth data must follow this format:

var dataset = {
  "bids": [["price", "quantity"], ...], // Descending prices
  "asks": [["price", "quantity"], ...]  // Ascending prices
};

Pro Tip: Fetch real-time data via APIs like Binance:

https://api.binance.com/api/v1/depth?symbol=BNBBTC&limit=50

STEP 3: Initialize the Chart

new uikit.DepthChart({
  el: '#depth-chart',
  dataset: dataset
});

3. Theme Customization

👉 Enhance your trading UI with pre-built themes

3.1 Dark Theme

theme: uikit.Theme.dark()

3.2 Light Theme

theme: uikit.Theme.light()

3.3 Custom Themes

Modify color schemes in src/Theme.js or create new configurations.

4. Advanced: Source Code Modification

For deep customization:

Download the source package.
Modify files in /src.
Rebuild using Rollup:
```
npm run build
```

FAQ

Q: Can I use DepthChart.js with React?
A: Yes! It's framework-agnostic—import it directly or wrap it in a component.

Q: How do I calculate the bid-ask spread?
A: Subtract the highest bid from the lowest ask:
spread = asks[0][0] - bids[0][0]

Q: Is mobile touch support available?
A: Currently optimized for desktop, but touch events can be added via custom code.

👉 Explore more trading tools to complement your market analysis toolkit.