From 05eb6a8e06a29b440a11cc170c4d4b8a686c1d5a Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Wed, 8 Jan 2025 11:31:21 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20add=20unit=20to=20axis=20labels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../@ourworldindata/grapher/src/axis/Axis.ts  | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/axis/Axis.ts b/packages/@ourworldindata/grapher/src/axis/Axis.ts
index e3bbb71c11..a5ec9351ff 100644
--- a/packages/@ourworldindata/grapher/src/axis/Axis.ts
+++ b/packages/@ourworldindata/grapher/src/axis/Axis.ts
@@ -493,17 +493,31 @@ abstract class AbstractAxis {
     }
 
     @computed get labelTextWrap(): MarkdownTextWrap | undefined {
-        const text = this.label
-        return text
-            ? new MarkdownTextWrap({
-                  maxWidth: this.labelMaxWidth,
-                  fontSize: this.labelFontSize,
-                  text,
-                  lineHeight: 1,
-                  detailsOrderedByReference:
-                      this.axisManager?.detailsOrderedByReference,
-              })
-            : undefined
+        if (!this.label) return
+
+        const textWrapProps = {
+            maxWidth: this.labelMaxWidth,
+            fontSize: this.labelFontSize,
+            lineHeight: 1,
+            detailsOrderedByReference:
+                this.axisManager?.detailsOrderedByReference,
+        }
+
+        const displayUnit = this.formatColumn?.displayUnit
+        if (displayUnit) {
+            return MarkdownTextWrap.fromFragments({
+                main: { text: this.label, bold: true },
+                secondary: { text: `(${displayUnit})` },
+                newLine: "avoid-wrap",
+                textWrapProps,
+            })
+        } else {
+            return new MarkdownTextWrap({
+                text: this.label,
+                fontWeight: 700,
+                ...textWrapProps,
+            })
+        }
     }
 
     @computed get labelHeight(): number {