Trading Chart
A React candlestick chart for trading dashboards with live OHLCV data, volume, timeframe tabs, crosshair readouts, and drawing tools.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| candles | CandlestickData<UTCTimestamp>[] | Candles to render. Append a new entry (or replace the last) to stream live data. | |
| volumes | HistogramData<UTCTimestamp>[] | Matching volumes. Omit to hide the volume pane. | |
| dataKey | string | Dataset identity (e.g. `${timeframe}:${candles[0]?.time}`). A change performs a full resync instead of a last-bar update — derive it from the data so fresh history always resyncs. | |
| symbol | string | "BTC" | Base asset label in the header. |
| quote | string | "USD" | Quote asset label in the header. |
| logoSrc | string | Coin/logo image URL shown next to the symbol. Hidden when omitted. | |
| timeframes | { id: string; label: string }[] | 1m, 5m, 15m, 1H, 4H, 1D | Timeframe pills. Pass [] to hide the selector. |
| activeTimeframe | string | Controlled active timeframe id. | |
| defaultTimeframe | string | Uncontrolled initial timeframe id. | |
| onTimeframeChange | (id: string) => void | Called with the timeframe id when the user picks one. | |
| feedStatus | "live" | "connecting" | "simulated" | Feed state shown as a status dot. Omit to hide the dot (static datasets). | |
| showDrawingTools | boolean | true | Show the drawing-tools rail (trend, fib, brush, eraser, undo, clear). |
| drawings | Drawing[] | Controlled drawings. | |
| defaultDrawings | Drawing[] | Uncontrolled initial drawings. | |
| onDrawingsChange | (drawings: Drawing[]) => void | Called with the next drawings on every add, erase, undo, or clear. | |
| height | number | 380 | Chart height in px. |
| className | string | Additional classes for the root card. |