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/2] 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/2] 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}