Candlestick Chart

// Define candle data (OHLC)
const candles = [
 { open: 45, close: 60, high: 70, low: 40 }, // green (bullish)
 { open: 60, close: 50, high: 65, low: 45 }, // red (bearish)
 { open: 50, close: 65, high: 75, low: 48 }, // green
]

// Render candlesticks
{candles.map((candle, i) => {
 const isGreen = candle.close > candle.open
 const bodyTop = Math.max(candle.open, candle.close)
 const bodyBottom = Math.min(candle.open, candle.close)
 const bodyHeight = bodyTop - bodyBottom
 const wickTop = candle.high - bodyTop
 const wickBottom = bodyBottom - candle.low

 return (
 <div key={i} className="flex flex-col items-center">
 {/* Upper wick */}
 <div style={{ height: `${wickTop}%`, backgroundColor: isGreen ? 'green' : 'red' }} />
 {/* Body */}
 <div style={{ height: `${bodyHeight}%`, backgroundColor: isGreen ? 'green' : 'red' }} />
 {/* Lower wick */}
 <div style={{ height: `${wickBottom}%`, backgroundColor: isGreen ? 'green' : 'red' }} />
 </div>
 )
})}