From 18bf8b7af7b0daa9020da6325274073f75a47405 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Thu, 12 Dec 2024 15:01:51 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20gray=20out=20non-focused=20multi?=
 =?UTF-8?q?-color=20lines?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/lineCharts/LineChart.tsx      | 39 ++++++++++---------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
index 7d5e49c64fd..780c53e011f 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -200,25 +200,26 @@ class Lines extends React.Component<LinesProps> {
             />
         )
 
-        const line = this.props.multiColor ? (
-            <MultiColorPolyline
-                id={makeIdForHumanConsumption("line", series.seriesName)}
-                points={series.placedPoints}
-                strokeLinejoin="round"
-                strokeWidth={strokeWidth}
-                strokeDasharray={strokeDasharray}
-                strokeOpacity={strokeOpacity}
-            />
-        ) : (
-            <LinePath
-                id={makeIdForHumanConsumption("line", series.seriesName)}
-                placedPoints={series.placedPoints}
-                stroke={color}
-                strokeWidth={strokeWidth}
-                strokeOpacity={strokeOpacity}
-                strokeDasharray={strokeDasharray}
-            />
-        )
+        const line =
+            this.props.multiColor && !focus.background ? (
+                <MultiColorPolyline
+                    id={makeIdForHumanConsumption("line", series.seriesName)}
+                    points={series.placedPoints}
+                    strokeLinejoin="round"
+                    strokeWidth={strokeWidth}
+                    strokeDasharray={strokeDasharray}
+                    strokeOpacity={strokeOpacity}
+                />
+            ) : (
+                <LinePath
+                    id={makeIdForHumanConsumption("line", series.seriesName)}
+                    placedPoints={series.placedPoints}
+                    stroke={color}
+                    strokeWidth={strokeWidth}
+                    strokeOpacity={strokeOpacity}
+                    strokeDasharray={strokeDasharray}
+                />
+            )
 
         return (
             <>