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:
Celes Renata
2026-04-30 23:31:55 +00:00
parent 6169efdc89
commit 5d2ffd9163
+3 -2
View File
@@ -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"