From 3cd41f71102dc31fcd90db5faef1bf3fd0e90c85 Mon Sep 17 00:00:00 2001
From: Anubhav Banerjee <banerjeeanubhav03@gmail.com>
Date: Mon, 23 Oct 2023 08:59:31 -0400
Subject: [PATCH 1/3] Fixed the line seperator bug between colorLegend and
 SizeLegend in scatterplot charts

---
 .../src/scatterCharts/ScatterPlotChart.tsx      | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
index 2e528a34539..332b2ec8bb7 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
@@ -759,13 +759,16 @@ export class ScatterPlotChart
                 <VerticalColorLegend manager={this} />
                 {sizeLegend && (
                     <>
-                        <line
-                            x1={bounds.right - sidebarWidth}
-                            y1={sizeLegendY - 14}
-                            x2={bounds.right - 5}
-                            y2={sizeLegendY - 14}
-                            stroke="#ccc"
-                        />
+                    {(this.activeColors.length > 1) && (
+                            <line
+                                x1={bounds.right - sidebarWidth}
+                                y1={sizeLegendY - 14}
+                                x2={bounds.right - 5}
+                                y2={sizeLegendY - 14}
+                                stroke="#ccc"
+                            />
+                            )
+                    }
                         {sizeLegend.render(this.legendX, sizeLegendY)}
                     </>
                 )}

From ab5c16b552be9950b741cccec02af40a8ca6878d Mon Sep 17 00:00:00 2001
From: Anubhav Banerjee <banerjeeanubhav03@gmail.com>
Date: Tue, 24 Oct 2023 06:48:07 +0000
Subject: [PATCH 2/3] Changed the check for seperator line from
 activeColors.length to legendItems.length, also solved the padding issue for
 sizeLegend

---
 .../grapher/src/scatterCharts/ScatterPlotChart.tsx         | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
index 332b2ec8bb7..947720e5255 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
@@ -739,7 +739,10 @@ export class ScatterPlotChart
             legendDimensions,
         } = this
 
-        const sizeLegendY = bounds.top + legendDimensions.height + 16
+        let sizeLegendY = bounds.top 
+        if (this.legendItems.length > 0) {
+            sizeLegendY = bounds.top + legendDimensions.height + 16
+        }
         const arrowLegendY = sizeLegend
             ? sizeLegendY + sizeLegend.height + 15
             : sizeLegendY
@@ -759,7 +762,7 @@ export class ScatterPlotChart
                 <VerticalColorLegend manager={this} />
                 {sizeLegend && (
                     <>
-                    {(this.activeColors.length > 1) && (
+                    {(this.legendItems.length > 0) && (
                             <line
                                 x1={bounds.right - sidebarWidth}
                                 y1={sizeLegendY - 14}

From ce1f1794bb86b22300894bbbe5ce3ded14b61b58 Mon Sep 17 00:00:00 2001
From: Anubhav Banerjee <banerjeeanubhav03@gmail.com>
Date: Tue, 24 Oct 2023 13:24:31 +0000
Subject: [PATCH 3/3] Fixed the allignment of x-axis tick labels

---
 .../@ourworldindata/grapher/src/axis/Axis.ts  |  8 -------
 .../src/scatterCharts/ScatterPlotChart.tsx    | 24 +++++++------------
 2 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/axis/Axis.ts b/packages/@ourworldindata/grapher/src/axis/Axis.ts
index 443fa0a7c77..19b698928c8 100644
--- a/packages/@ourworldindata/grapher/src/axis/Axis.ts
+++ b/packages/@ourworldindata/grapher/src/axis/Axis.ts
@@ -526,14 +526,6 @@ export class HorizontalAxis extends AbstractAxis {
         let xAlign = HorizontalAlign.center
         const left = x - width / 2
         const right = x + width / 2
-        if (left < this.rangeMin) {
-            x = this.rangeMin
-            xAlign = HorizontalAlign.left
-        }
-        if (right > this.rangeMax) {
-            x = this.rangeMax
-            xAlign = HorizontalAlign.right
-        }
         return {
             value,
             formattedValue,
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
index 947720e5255..6848a2eecff 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
@@ -739,10 +739,7 @@ export class ScatterPlotChart
             legendDimensions,
         } = this
 
-        let sizeLegendY = bounds.top 
-        if (this.legendItems.length > 0) {
-            sizeLegendY = bounds.top + legendDimensions.height + 16
-        }
+        const sizeLegendY = bounds.top + legendDimensions.height + 16
         const arrowLegendY = sizeLegend
             ? sizeLegendY + sizeLegend.height + 15
             : sizeLegendY
@@ -762,16 +759,13 @@ export class ScatterPlotChart
                 <VerticalColorLegend manager={this} />
                 {sizeLegend && (
                     <>
-                    {(this.legendItems.length > 0) && (
-                            <line
-                                x1={bounds.right - sidebarWidth}
-                                y1={sizeLegendY - 14}
-                                x2={bounds.right - 5}
-                                y2={sizeLegendY - 14}
-                                stroke="#ccc"
-                            />
-                            )
-                    }
+                        <line
+                            x1={bounds.right - sidebarWidth}
+                            y1={sizeLegendY - 14}
+                            x2={bounds.right - 5}
+                            y2={sizeLegendY - 14}
+                            stroke="#ccc"
+                        />
                         {sizeLegend.render(this.legendX, sizeLegendY)}
                     </>
                 )}
@@ -1267,4 +1261,4 @@ export class ScatterPlotChart
             }
         }
     }
-}
+}
\ No newline at end of file