From cc428c7a5ce1b4f3cfb830e9e828afd802b7acc6 Mon Sep 17 00:00:00 2001
From: Yousuf Ansari <141269047+YousufFFFF@users.noreply.github.com>
Date: Thu, 18 Dec 2025 00:46:35 +0530
Subject: [PATCH] fix(echarts): use scroll legend for horizontal layouts to
 prevent overlap (#36306)

(cherry picked from commit 33a425bbbc67b14b10f17ae48732f242ec066ba2)
---
 .../plugin-chart-echarts/src/utils/series.ts    | 12 +++++++++---
 .../test/Gantt/transformProps.test.ts           |  1 -
 .../test/utils/series.test.ts                   | 17 +++++++++++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts
index 795e3efc0cd..8844826eb92 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts
@@ -437,15 +437,21 @@ export function getLegendProps(
   zoomable = false,
   legendState?: LegendState,
   padding?: LegendPaddingType,
-): LegendComponentOption | LegendComponentOption[] {
-  const legend: LegendComponentOption | LegendComponentOption[] = {
+): LegendComponentOption {
+  const isHorizontal =
+    orientation === LegendOrientation.Top ||
+    orientation === LegendOrientation.Bottom;
+
+  const effectiveType =
+    type === LegendType.Scroll || !isHorizontal ? type : LegendType.Scroll;
+  const legend: LegendComponentOption = {
     orient: [LegendOrientation.Top, LegendOrientation.Bottom].includes(
       orientation,
     )
       ? 'horizontal'
       : 'vertical',
     show,
-    type,
+    type: effectiveType,
     selected: legendState,
     selector: ['all', 'inverse'],
     selectorLabel: {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Gantt/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Gantt/transformProps.test.ts
index 5a1fc885be9..9c5ff8778e5 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Gantt/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Gantt/transformProps.test.ts
@@ -137,7 +137,6 @@ describe('Gantt transformProps', () => {
           legend: expect.objectContaining({
             show: true,
             type: 'scroll',
-            selector: ['all', 'inverse'],
           }),
           tooltip: {
             formatter: expect.anything(),
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts
index 9f8b0791193..a4d12001023 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts
@@ -891,14 +891,27 @@ describe('getLegendProps', () => {
     });
   });
 
-  it('should return the correct props for plain type with bottom orientation', () => {
+  it('should default plain legends to scroll for bottom orientation', () => {
     expect(
       getLegendProps(LegendType.Plain, LegendOrientation.Bottom, false, theme),
     ).toEqual({
       show: false,
       bottom: 0,
       orient: 'horizontal',
-      type: 'plain',
+      type: 'scroll',
+      ...expectedThemeProps,
+    });
+  });
+
+  it('should default plain legends to scroll for top orientation', () => {
+    expect(
+      getLegendProps(LegendType.Plain, LegendOrientation.Top, false, theme),
+    ).toEqual({
+      show: false,
+      top: 0,
+      right: 0,
+      orient: 'horizontal',
+      type: 'scroll',
       ...expectedThemeProps,
     });
   });