From 0434444e1b352ac6b60a200740f75a4929c5988e Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Fri, 20 Dec 2024 16:12:57 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20(facet)=20show=20swatch=20colour?=
 =?UTF-8?q?=20on=20hovering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/horizontalColorLegend/HorizontalColorLegends.tsx       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
index d53b679238..37ed032586 100644
--- a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
+++ b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
@@ -854,6 +854,7 @@ export class HorizontalCategoricalColorLegend extends HorizontalColorLegend {
             <g id={makeIdForHumanConsumption("swatches")}>
                 {marks.map((mark, index) => {
                     const isActive = activeColors?.includes(mark.bin.color)
+                    const isHovered = hoverColors.includes(mark.bin.color)
                     const isNotHovered =
                         hoverColors.length > 0 &&
                         !hoverColors.includes(mark.bin.color)
@@ -863,7 +864,7 @@ export class HorizontalCategoricalColorLegend extends HorizontalColorLegend {
                         : mark.bin.color
 
                     const fill =
-                        isActive || activeColors === undefined
+                        isHovered || isActive || activeColors === undefined
                             ? color
                             : OWID_NON_FOCUSED_GRAY