Installation

Requirements

React 18 or 19
Any modern bundler - Vite, Next.js, webpack 5, Parcel, Rollup

Nothing else. Depth ships prebuilt: the CSS is compiled, the fonts are embedded, and the workers are inlined. There is no bundler configuration to do.

Install the package

$ npm install @christtrade/depth

React is a peer dependency, so if you don't have it already:

npm install react react-dom

bash

Import the stylesheet

Depth's UI - toolbar, dialogs, drawing tools, order ticket - needs its stylesheet. Import it once, anywhere that runs before the chart mounts:

import '@christtrade/depth/depth.css';

This is required whether or not your project uses Tailwind. Depth's classes are already compiled into that file, so there is nothing to add to a tailwind.config and nothing that can get purged.

depth.css includes a CSS reset (Tailwind preflight), which is what you want in a fresh app. If it fights styles you already have, use the variant without it:

import '@christtrade/depth/depth.nopreflight.css';

Import one or the other, not both.

Give it a theme and a height

Two things account for most "the chart looks broken" reports:

Dark mode is a dark class on any ancestor, or on <html>. Without it you get the light theme, which is easy to mistake for a styling failure:

<html lang="en" class="dark">

html

The chart fills its container. A parent with height: auto collapses it to nothing, so give it a real height:

<div style={{ width: '100%', height: '600px' }}>{element}</div>

tsx

Verify it works

SimulatedMarketAdapter generates synthetic market data, so this renders with no data source wired up:

import { useMemo } from 'react';
import { useDepthChart, SimulatedMarketAdapter } from '@christtrade/depth';
import '@christtrade/depth/depth.css';

export default function MyChart() {
    const adapter = useMemo(() => new SimulatedMarketAdapter(), []);

    const { chart, element } = useDepthChart({
        dataAdapter: adapter,
        // must match what the adapter resolves. a symbol it does not know
        // leaves the chart stuck on "Getting market data..."
        symbol: 'SIM-MARKET',
        horizon: Date.now(),
        initialLoad: {
            start: Date.now() - 1000 * 60 * 60 * 24,
            end: Date.now(),
        },
    });

    return <div style={{ width: '100%', height: '600px' }}>{element}</div>;
}

tsx

element is the chart. chart is the controller handle - timeframes, symbols, drawings, plugins, serialization.

Content Security Policy

Depth's workers are inlined as blob URLs, which is why no bundler needs configuring. If you serve under a strict CSP, allow them:

worker-src blob:;

text

That is the only deployment requirement Depth adds.

Framework notes

There is no per-bundler setup, but two environments have a wrinkle worth knowing:

Next.js - the chart is a client component. Mark the file that calls useDepthChart with 'use client'. It touches window, canvas and workers, so it cannot render on the server.

npm create vite starter - the default template's src/index.css centres and pads #root, which fights the chart's layout. Remove that import, or scope it away from the chart's container.

If you see a chart, you're done. Head to Quick Start to connect real data.

Installation#

Requirements#