fix text a little

theloosecollective · Feb 4, 2024 · f052882 · f052882
1 parent 054eef6
commit f052882
Showing 1 changed file with 36 additions and 18 deletions.
diff --git a/src/components/graph/NetWorthChart.tsx b/src/components/graph/NetWorthChart.tsx
@@ -116,24 +116,42 @@ export function NetWorthChart({ filteredData, date, setDate }: Props) {
 								}
 							/>
 							{d.data.map((d) => (
-								<text
-									key={d.name}
-									// fill="currentColor"
-									x={x(new Date(d.date)) ?? 0}
-									y={y(d.amount) ?? 0}
-									// dy={15}
-									textAnchor="middle"
-									fontSize="12"
-									transform="translate(15,0)"
-									fill={
-										hoveredTick === d.date || date === d.date
-											? 'purple'
-											: 'transparent'
-									}
-								>
-									{d.name}
-									{formatMoneyK(d.amount)}
-								</text>
+								<g>
+									<text
+										key={d.name}
+										// fill="currentColor"
+										x={x(new Date(d.date)) ?? 0}
+										y={y(d.amount) ?? 0}
+										// dy={15}
+										textAnchor="middle"
+										fontSize="12"
+										transform="translate(15,0)"
+										fill={
+											hoveredTick === d.date || date === d.date
+												? 'purple'
+												: 'transparent'
+										}
+									>
+										{d.name}
+									</text>
+									<text
+										key={d.name}
+										// fill="currentColor"
+										x={x(new Date(d.date)) ?? 0}
+										y={(y(d.amount) ?? 0) + 10}
+										// dy={15}
+										textAnchor="middle"
+										fontSize="12"
+										transform="translate(15,0)"
+										fill={
+											hoveredTick === d.date || date === d.date
+												? 'purple'
+												: 'transparent'
+										}
+									>
+										{formatMoneyK(d.amount)}
+									</text>
+								</g>
 							))}
 						</Fragment>
 					))}