fix(echarts): use scroll legend for horizontal layouts to prevent overlap (#36306)

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: {

superset-frontend/plugins/plugin-chart-echarts/test/Gantt/transformProps.test.ts

@@ -139,7 +139,6 @@ describe('Gantt transformProps', () => {
           legend: expect.objectContaining({
             show: true,
             type: 'scroll',
-            selector: ['all', 'inverse'],
           }),
           tooltip: {
             formatter: expect.anything(),

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,
     });
   });