Candlestick Chart
Visualize financial OHLC data (Open, High, Low, Close). Essential for stock and crypto market analysis.
Usage
import { CandlestickChart } from "@chartts/react"
<CandlestickChart
data={stockData}
x="date"
open="open"
high="high"
low="low"
close="close"
/>Props
| Prop | Type | Description |
|---|---|---|
| data | T[] | Array of OHLC data objects |
| x | keyof T | Key for time/date axis |
| open | keyof T | Key for open values |
| high | keyof T | Key for high values |
| low | keyof T | Key for low values |
| close | keyof T | Key for close values |
| upColor | string | Color for up candles. Default: '#10b981' |
| downColor | string | Color for down candles. Default: '#ef4444' |
Features
- Standard OHLC candlestick rendering
- Up/down color customization
- Volume overlay support
- Zoom and pan for time navigation
- Crosshair with price labels
- Real-time data streaming
Other Charts
Line ChartBar ChartArea ChartPie / Donut ChartScatter ChartBubble ChartRadar ChartWaterfall ChartFunnel ChartGauge ChartSparklineStacked Bar ChartHorizontal Bar ChartDonut ChartHeatmapBox PlotHistogramTreemapPolar ChartRadial Bar ChartLollipop ChartBullet ChartDumbbell ChartCalendar ChartCombo ChartSankey Diagram