Trading Chart
A candlestick chart for showing your trades on live market data: B/S markers with same-candle clustering (3B), hover tooltips with trade details, infinite history on scroll, and live candle updates.
Loading market data
Skeleton
TradingChart shows this shaped skeleton automatically while its bundled fetcher loads. Import TradingChartSkeleton directly for a React Suspense fallback or an SSR placeholder.
Loading market data
Installation
pnpm dlx shadcn@latest add @voraui/trading-chart
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| symbol | string | "BTCUSDT" | Binance spot symbol. |
| timeframe | Timeframe | "1h" | One of "1m" | "5m" | "15m" | "1h" | "4h" | "8h" | "1d" | "1w" | "1M". |
| trades | TradeSignal[] | [] | Your trades and indicator signals, rendered as chart markers. |
| candles | OhlcvCandle[] | - | Your own candle data. When set, the bundled Binance fetcher and live polling are disabled. |
| live | boolean | true | Poll Binance for live candle updates. |
| height | number | 500 | Chart height in pixels. |
| limit | number | 500 | Candles for the initial load (max 1000). |
| showTooltips | boolean | true | Show trade tooltips on hover. |
| className | string | - | Extra classes for the wrapper. |
- symbolstringdefault: "BTCUSDT"
- Binance spot symbol.
- timeframeTimeframedefault: "1h"
- One of "1m" | "5m" | "15m" | "1h" | "4h" | "8h" | "1d" | "1w" | "1M".
- tradesTradeSignal[]default: []
- Your trades and indicator signals, rendered as chart markers.
- candlesOhlcvCandle[]default: -
- Your own candle data. When set, the bundled Binance fetcher and live polling are disabled.
- livebooleandefault: true
- Poll Binance for live candle updates.
- heightnumberdefault: 500
- Chart height in pixels.
- limitnumberdefault: 500
- Candles for the initial load (max 1000).
- showTooltipsbooleandefault: true
- Show trade tooltips on hover.
- classNamestringdefault: -
- Extra classes for the wrapper.
Data source
GET https://api.binance.com/api/v3/klines. Free, keyless, CORS-enabled. Trades are always your own data, passed via the trades prop. Dark mode styling requires a next-themes ThemeProvider; without one the chart renders with its light theme.