From ae293366171fd0f030c8bb36edc690ea1c4c517e Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Fri, 20 Dec 2024 16:09:09 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20(scatter)=20left-align=20no=20da?=
 =?UTF-8?q?ta=20section?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/scatterCharts/NoDataSection.tsx            | 7 +++++--
 .../@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
index a5862b3172c..9041e4ee8f6 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Bounds } from "@ourworldindata/utils"
+import { Bounds, HorizontalAlign } from "@ourworldindata/utils"
 import {
     GRAPHER_FONT_SCALE_11,
     GRAPHER_FONT_SCALE_12,
@@ -9,10 +9,12 @@ import { GRAPHER_LIGHT_TEXT } from "../color/ColorConstants"
 export function NoDataSection({
     seriesNames,
     bounds,
+    align = HorizontalAlign.left,
     baseFontSize = 16,
 }: {
     seriesNames: string[]
     bounds: Bounds
+    align?: HorizontalAlign
     baseFontSize?: number
 }): React.ReactElement {
     {
@@ -30,7 +32,8 @@ export function NoDataSection({
                 className="NoDataSection"
                 {...bounds.toProps()}
                 style={{
-                    textAlign: "right",
+                    textAlign:
+                        align === HorizontalAlign.right ? "right" : "left",
                     color: GRAPHER_LIGHT_TEXT,
                 }}
             >
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
index 3d01ce36072..b713209ebf9 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -35,6 +35,7 @@ import {
     VerticalAlign,
     FacetStrategy,
     InteractionState,
+    HorizontalAlign,
 } from "@ourworldindata/types"
 import { ChartInterface } from "../chart/ChartInterface"
 import { ChartManager } from "../chart/ChartManager"
@@ -1127,6 +1128,7 @@ export class SlopeChart
             <NoDataSection
                 seriesNames={seriesNames}
                 bounds={bounds}
+                align={HorizontalAlign.right}
                 baseFontSize={this.fontSize}
             />
         )