const CandlestickChart = ({ data }) => ( new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} angle={-45} textAnchor="end" height={80} style={{ fontSize: 12 }} /> `$${value.toFixed(2)}`} style={{ fontSize: 12 }} /> { if (name === 'Open' || name === 'Close' || name === 'High' || name === 'Low') { return [`$${value.toFixed(2)}`, name]; } return null; }} labelFormatter={(label) => `Date: ${new Date(label).toLocaleDateString()}`} /> {data.map((entry, index) => ( entry.open ? CHART_4_COLOR : CHART_6_COLOR} strokeWidth={1} dot={false} isAnimationActive={false} points={[ { x: index, y: entry.low }, { x: index, y: entry.high } ]} connectNulls={false} /> ))} {data.map((entry, index) => ( entry.open ? CHART_4_COLOR : CHART_6_COLOR} isAnimationActive={false} shape={(props) => { const { x, y, width, height, payload } = props; const barHeight = Math.abs(payload.close - payload.open); const barY = Math.min(payload.open, payload.close); return ( payload.close ? height : 0)} width={width} height={barHeight * (height / (payload.high - payload.low))} fill={payload.close > payload.open ? CHART_4_COLOR : CHART_6_COLOR} /> ); }} /> ))} );