From 3251e30a2e60344265fe77ed3117974af3873879 Mon Sep 17 00:00:00 2001
From: Joey Eamigh <55670930+JoeyEamigh@users.noreply.github.com>
Date: Wed, 11 Feb 2026 14:48:26 -0500
Subject: [PATCH] fix: use direct hex color for correlation chart axis labels

CSS variable hsl(var(--muted-foreground)) doesn't resolve in SVG
context. Use #a1a1aa (zinc-400) directly for reliable visibility
on dark background.
---
 src/components/charts/correlation-chart.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/charts/correlation-chart.tsx b/src/components/charts/correlation-chart.tsx
index f894628..f4b869f 100644
--- a/src/components/charts/correlation-chart.tsx
+++ b/src/components/charts/correlation-chart.tsx
@@ -129,7 +129,7 @@ export function CorrelationChart({ data }: CorrelationChartProps) {
               type="number"
               dataKey="total_capacity_mw"
               name="DC Capacity"
-              tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
+              tick={{ fontSize: 11, fill: '#a1a1aa' }}
               tickLine={false}
               axisLine={false}
               tickFormatter={(v: number) => `${v} MW`}>
@@ -137,14 +137,14 @@ export function CorrelationChart({ data }: CorrelationChartProps) {
                 value="Total DC Capacity (MW)"
                 offset={-10}
                 position="insideBottom"
-                style={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
+                style={{ fontSize: 11, fill: '#a1a1aa' }}
               />
             </XAxis>
             <YAxis
               type="number"
               dataKey="avg_price"
               name="Avg Price"
-              tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
+              tick={{ fontSize: 11, fill: '#a1a1aa' }}
               tickLine={false}
               axisLine={false}
               tickFormatter={(v: number) => `$${v}`}>
@@ -152,7 +152,7 @@ export function CorrelationChart({ data }: CorrelationChartProps) {
                 value="Avg Price ($/MWh)"
                 angle={-90}
                 position="insideLeft"
-                style={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
+                style={{ fontSize: 11, fill: '#a1a1aa' }}
               />
             </YAxis>
             <ZAxis range={[200, 200]} />