fix: vertical market markers need yAxisId + move legend below date labels
- Add yAxisId='left' to vertical ReferenceLine (required by Recharts) - Increase bottom margin from 40 to 70 for date label + legend space - Legend uses verticalAlign='bottom' with 24px top padding
This commit is contained in:
@@ -802,11 +802,12 @@ function TrendHistoryChart({ trends, latestTrends, ticker, marketPrices, range90
|
||||
// Shared chart content — rendered at different sizes
|
||||
const chartContent = (height: number) => (
|
||||
<ResponsiveContainer width="100%" height={height}>
|
||||
<LineChart data={chartData} margin={{ top: 5, right: 20, bottom: 40, left: 0 }}>
|
||||
<LineChart data={chartData} margin={{ top: 5, right: 20, bottom: 70, left: 0 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#334155" />
|
||||
{marketMarkers.map((m, i) => (
|
||||
<ReferenceLine
|
||||
key={`market-${i}`}
|
||||
yAxisId="left"
|
||||
x={m.ts}
|
||||
stroke={m.label === 'Open' ? '#22c55e' : '#ef4444'}
|
||||
strokeDasharray="4 4"
|
||||
@@ -845,7 +846,7 @@ function TrendHistoryChart({ trends, latestTrends, ticker, marketPrices, range90
|
||||
/>
|
||||
)}
|
||||
<Tooltip content={TrendTooltip} />
|
||||
<Legend wrapperStyle={{ color: '#94a3b8', fontSize: 12 }} />
|
||||
<Legend verticalAlign="bottom" wrapperStyle={{ color: '#94a3b8', fontSize: 12, paddingTop: 24 }} />
|
||||
{hasPrice && range90d.high != null && (
|
||||
<ReferenceLine
|
||||
yAxisId="right"
|
||||
|
||||
Reference in New Issue
Block a user