diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts
index 3eae5e258d..5fa23f90bf 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts
@@ -421,6 +421,7 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
                 ? 'flex-end'
                 : 'center'
           }
+          const verticalLegend = position === 'left' || position === 'right'
           legend = {
             color: {
               orientation: orient,
@@ -435,9 +436,8 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
               navPageNumFontSize: legendSize,
               navPageNumFill: legendColor,
               navButtonSize: legendSize,
-              navOrientation:
-                position === 'left' || position === 'right' ? 'vertical' : 'horizontal',
-              maxRows: 1,
+              navOrientation: verticalLegend ? 'vertical' : 'horizontal',
+              ...(verticalLegend ? { maxCols: 1 } : { maxRows: 1 }),
               navControllerSpacing: 20
             }
           }
diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2.ts
index fdd8b23a92..ed34c2ee60 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2.ts
@@ -56,6 +56,7 @@ export abstract class G2ChartView<
           } else {
             position = l.hPosition
           }
+          const verticalLegend = position === 'left' || position === 'right'
           legend = {
             position,
             layout: {
@@ -70,7 +71,9 @@ export abstract class G2ChartView<
             navPageNumFontSize: legendSize,
             navPageNumFill: legendColor,
             navButtonSize: legendSize,
-            navOrientation: position === 'left' || position === 'right' ? 'vertical' : 'horizontal'
+            navOrientation: verticalLegend ? 'vertical' : 'horizontal',
+            navControllerSpacing: 4,
+            ...(verticalLegend ? { maxCols: 1 } : { maxRows: 1 })
           }
         } else {
           legend = false
@@ -136,6 +139,8 @@ export abstract class G2ChartView<
   }
 
   public setupSubSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
+    void chart
+    void data
     return undefined
   }