Depth chart
SOL · USDC
- Spread
- $0.25 (0.137%)
- Bid depth
- 13K
- Ask depth
- 13.9K
Usage
Import the component and the stylesheet once. See Getting started to install the package.
import { DepthChartCard } from '@lilt-ui/charts/finance';
import '@lilt-ui/charts/styles.css';<DepthChartCard
title="SOL · USDC"
bids={book.bids}
asks={book.asks}
valueFormat={{ style: 'currency', currency: 'USD' }}
/>Omit title to leave out the visible title. Set header={false} to remove the whole header, and use aria-label to name a chart inside your own card. surface="ghost" controls only the visual frame. See Card composition.
Data
Bids accumulate from the best (highest) bid down and asks from the best (lowest) ask up, so each curve shows how much size rests between the mid and a price. Orders at the same price merge. A crossed book, with a bid at or above an ask, throws rather than drawing a misleading spread. depthLevels returns the same cumulative levels, mid and spread for your own layouts.
// Resting orders: a price and the size at it, in any order.
const book = {
bids: [
{ price: 182.28, size: 1050 },
{ price: 182.03, size: 626 },
],
asks: [
{ price: 182.53, size: 356 },
{ price: 182.78, size: 1793 },
],
};
<DepthChartCard title="SOL · USDC" bids={book.bids} asks={book.asks} />Props
Every prop DepthChartCard accepts, in the order you are likely to reach for them.
| Prop | Type | Description |
|---|---|---|
header | boolean | False removes the title, midpoint and summary stats. Defaults to true. |
aria-label | string | Accessible name, independent of the visible title. |
title | string | Optional visible title. Also names the chart unless aria-label is set. |
bids | { price, size }[] | Resting buy orders, in any order. |
asks | { price, size }[] | Resting sell orders, in any order. |
valueFormat | Intl.NumberFormatOptions | Price format for the mid, spread and axis. Defaults to US dollars. |
sizeFormat | Intl.NumberFormatOptions | Size format for depth. Compact numbers by default. |
height | number | Plot height in pixels. Defaults to 220. |
background | 'dots' | 'grid' | 'lines' | 'none' | Texture behind the depth areas. |
axis | 'minimal' | 'dots' | 'inline' | 'ruler' | 'classic' | 'segmented' | Axis preset. |
hoverStyle | 'soft' | 'solid' | 'accent' | How the pills look. |
surface | 'elevated' | 'outline' | 'ghost' | Card treatment. |
loading | boolean | Shows a neutral loading skeleton, not data. |
loadingStyle | 'shimmer' | 'draw' | 'breathe' | Shimmer sweeps a highlight over still shapes; draw reveals them in order; breathe lets them settle. Follows the selected look, including depth, and respects reduced motion. |
empty | 'dots' | 'shape' | ReactElement | null | What the card shows when the period has no data. Dots (default) gathers a quiet dot field around the message; shape lays the chart’s own outline behind it. Pass `<ChartEmpty>` with your own words, any element of your own, or null for nothing. Both looks stay still, so empty never reads as loading, and the headline reads a dash, never zero. |
motion | 'auto' | 'none' | None turns off decorative motion. |
depth | boolean | Draws both sides' edges as lit tubes with a soft shadow; every step keeps its exact price. |
locale | string | Locale used for number formatting. Defaults to en-US. |
className | string | Additional class on the card frame. |
style | CSSProperties | ChartStyle | Inline styles and scoped --lilt-* chart variables. |
numberStyle | 'count' | 'pop' | 'slide' | 'roll' | 'flow' | 'scramble' | Headline number animation. Defaults to count; motion settings take precedence. |