From fd4a34b4958bdfbea59ca96527064bb4e8af0a7d Mon Sep 17 00:00:00 2001
From: Stan Runge <stan@stanrunge.dev>
Date: Sun, 25 Oct 2026 16:06:48 +0000
Subject: [PATCH] =?UTF-8?q?money:=20thick=20=E2=82=AC0=20baseline=20on=20t?=
 =?UTF-8?q?he=20wealth=20charts=20(all=20modes)=20so=20dips=20toward=20zer?=
 =?UTF-8?q?o=20or=20below=20stand=20out?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/money-tracker/MoneyChart.svelte | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/lib/money-tracker/MoneyChart.svelte b/src/lib/money-tracker/MoneyChart.svelte
index a8af5f5..d5b5c2f 100644
--- a/src/lib/money-tracker/MoneyChart.svelte
+++ b/src/lib/money-tracker/MoneyChart.svelte
@@ -6,7 +6,8 @@
 		title,
 		unit = '€',
 		marker,
-		grid
+		grid,
+		zeroLine
 	}: {
 		series: ChartSeries[];
 		title: string;
@@ -14,7 +15,10 @@
 		marker?: { date: string; label: string };
 		/** Vertical gridlines: every month (1 January drawn stronger), every year, or every decade. */
 		grid?: GridMode;
+		/** Thick baseline at 0 (default on for money charts) so dips toward zero stand out. */
+		zeroLine?: boolean;
 	} = $props();
+	let showZero = $derived(zeroLine ?? unit === '€');
 	let clientWidth = $state(800);
 	let width = $derived(Math.max(280, clientWidth));
 	let compact = $derived(width < 520);
@@ -189,6 +193,9 @@
 						font-size="11">{format(value)}</text
 					>
 				{/each}
+				{#if showZero && min <= 0 && max >= 0}
+					<line class="zero-line" x1={plot.left} x2={width - plot.right} y1={y(0)} y2={y(0)} />
+				{/if}
 				{#each axisTicks as tick (tick)}
 					<text
 						x={x(tick)}
@@ -328,6 +335,13 @@
 		stroke-opacity: 0.55;
 		shape-rendering: crispEdges;
 	}
+	/* The €0 baseline: thicker and higher contrast than the gridlines, under the data lines. */
+	.zero-line {
+		stroke: var(--site-text, currentColor);
+		stroke-width: 2;
+		stroke-opacity: 0.6;
+		shape-rendering: crispEdges;
+	}
 	.grid-x.year {
 		stroke: var(--site-muted);
 		stroke-width: 1.5;