const CandlestickChart = ({ data }) => { const getCandleColor = (entry) => { return entry.close >= entry.open ? CHART_1_COLOR : CHART_3_COLOR; }; return ( new Date(dateStr).toLocaleDateString('en-US', { year: 'numeric', month: 'short' })} angle={-45} textAnchor="end" height={70} style={{ fontSize: 12 }} /> `$${value.toFixed(2)}`} domain={['dataMin', 'dataMax']} style={{ fontSize: 12 }} /> { if (name === 'Open' || name === 'High' || name === 'Low' || name === 'Close') { return [`$${value.toFixed(2)}`, name]; } return [value, name]; }} labelFormatter={(label) => new Date(label).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })} /> {data.map((entry, index) => ( {/* Line for High-Low */} {/* Rectangle for Open-Close */} { const { x, y, width, height, payload } = props; const open = payload.open; const close = payload.close; const barHeight = Math.abs(close - open); const barY = Math.min(open, close); const barX = x + width / 2 - 2; // Center the bar return ( ); }} /> ))} ); };