style: use CartesianGrid for horizontal lines aligned with Y-axis ticks

Replace the CSS overlay with Recharts CartesianGrid (horizontal only)
so lines align perfectly with the Y-axis values.
This commit is contained in:
Usman Baig
2026-03-13 13:08:28 +01:00
parent 453a596eaf
commit 969887cc67

View File

@@ -2,7 +2,7 @@
import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
import { useTheme } from '@ciphera-net/ui'
import { Line, LineChart, XAxis, YAxis, ReferenceLine } from 'recharts'
import { CartesianGrid, Line, LineChart, XAxis, YAxis, ReferenceLine } from 'recharts'
import { ChartContainer, ChartTooltip, type ChartConfig } from '@/components/ui/line-charts-6'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { formatNumber, formatDuration, formatUpdatedAgo, DatePicker } from '@ciphera-net/ui'
@@ -384,17 +384,7 @@ export default function Chart({
</div>
</CardHeader>
<CardContent className="px-2.5 py-4 relative overflow-hidden">
{/* Subtle horizontal lines background */}
<div
className="pointer-events-none absolute inset-0"
style={{
backgroundImage: 'repeating-linear-gradient(to bottom, transparent, transparent 39px, var(--chart-grid) 39px, var(--chart-grid) 40px)',
opacity: 0.5,
maskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)',
WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)',
}}
/>
<CardContent className="px-2.5 py-4">
{/* Toolbar */}
<div className="flex items-center justify-between gap-3 mb-4 px-2">
<div className="flex items-center gap-3">
@@ -485,6 +475,13 @@ export default function Chart({
</filter>
</defs>
<CartesianGrid
horizontal={true}
vertical={false}
stroke="var(--chart-grid)"
strokeOpacity={0.7}
/>
<XAxis
dataKey="date"
axisLine={false}