From 96e46210ca4c551875ab215bf21d632342177b3f Mon Sep 17 00:00:00 2001
From: Gabor Szabo <shellsnake@icloud.com>
Date: Mon, 18 May 2026 11:49:54 +0200
Subject: [PATCH] fix(ui): derive TimeSeriesChart line stroke from the config
 key (#156)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TimeSeriesChart builds chartConfig with dynamic keys ([actualKey] /
[predictedKey]), so shadcn's ChartContainer injects --color-<key> CSS
variables. The <Line> elements, however, hardcoded stroke="var(--color-actual)"
and stroke="var(--color-predicted)". The forecast page passes
predictedKey="forecast", so the injected variable is --color-forecast;
var(--color-predicted) was undefined, the stroke was invalid, and SVG fell
back to its initial value `none` — the forecast line was invisible.

Build the stroke from the key: stroke={`var(--color-${actualKey})`} /
stroke={`var(--color-${predictedKey})`}.

Verified in a browser: the forecast line now renders in colour.
---
 frontend/src/components/charts/time-series-chart.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/charts/time-series-chart.tsx b/frontend/src/components/charts/time-series-chart.tsx
index 22b132ca..c6ac232a 100644
--- a/frontend/src/components/charts/time-series-chart.tsx
+++ b/frontend/src/components/charts/time-series-chart.tsx
@@ -79,7 +79,7 @@ export function TimeSeriesChart({
               <Line
                 type="monotone"
                 dataKey={actualKey}
-                stroke="var(--color-actual)"
+                stroke={`var(--color-${actualKey})`}
                 strokeWidth={2}
                 dot={false}
                 name="Actual"
@@ -89,7 +89,7 @@ export function TimeSeriesChart({
               <Line
                 type="monotone"
                 dataKey={predictedKey}
-                stroke="var(--color-predicted)"
+                stroke={`var(--color-${predictedKey})`}
                 strokeWidth={2}
                 strokeDasharray="5 5"
                 dot={false}