admin/stonks-oracle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: vertical market markers need yAxisId + move legend below date labels

Browse Source 
- 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
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/CompanyDetail.tsx
+3 -2
View File
@@ -802,11 +802,12 @@ function TrendHistoryChart({ trends, latestTrends, ticker, marketPrices, range90
// Shared chart content — rendered at different sizes // Shared chart content — rendered at different sizes
const chartContent = (height: number) => ( const chartContent = (height: number) => (
<ResponsiveContainer width="100%" height={height}> <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" /> <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
{marketMarkers.map((m, i) => ( {marketMarkers.map((m, i) => (
<ReferenceLine <ReferenceLine
key={`market-${i}`} key={`market-${i}`}
yAxisId="left"
x={m.ts} x={m.ts}
stroke={m.label === 'Open' ? '#22c55e' : '#ef4444'} stroke={m.label === 'Open' ? '#22c55e' : '#ef4444'}
strokeDasharray="4 4" strokeDasharray="4 4"
@@ -845,7 +846,7 @@ function TrendHistoryChart({ trends, latestTrends, ticker, marketPrices, range90
/> />
)} )}
<Tooltip content={TrendTooltip} /> <Tooltip content={TrendTooltip} />
<Legend wrapperStyle={{ color: '#94a3b8', fontSize: 12 }} /> <Legend verticalAlign="bottom" wrapperStyle={{ color: '#94a3b8', fontSize: 12, paddingTop: 24 }} />
{hasPrice && range90d.high != null && ( {hasPrice && range90d.high != null && (
<ReferenceLine <ReferenceLine
yAxisId="right" yAxisId="right"