Candles chart
Candlestick Chart
An OHLC candlestick chart with bullish and bearish tones, growing candle bodies and an interactive price tooltip.
Each candle is handcrafted SVG: a wick line and a body rect that grow from their center, colored by direction. Hovering or focusing a candle dims the rest and reveals open, high, low and close.
Dependencies
framer-motiontailwind-mergetailwind-variants
Interaction type
Hover or focus a candle to spotlight it and read its full OHLC values.
Usage
import { CandlestickChart } from "@/registry/new-york-v4/ui/candlestick-chart"
<CandlestickChart data={ohlc} />Sales Report
Open-high-low-close price action over 16 sessions
BullishBearish