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 3079253df8..71c3e4a946 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
@@ -16,6 +16,7 @@ import {
   TOOLTIP_TITLE_TPL
 } from '@/views/chart/components/js/panel/common/common_antv'
 import {
+  DEFAULT_BASIC_STYLE,
   DEFAULT_YAXIS_EXT_STYLE,
   DEFAULT_YAXIS_STYLE
 } from '@/views/chart/components/editor/util/chart'
@@ -205,6 +206,7 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
     const tooltipOptions: ViewSpec = {
       tooltip: d => d,
       interaction: {
+        ...children[0].interaction,
         tooltip: {
           mount: createTooltipWrapper(chart),
           css: tooltipCss(tooltipAttr),
@@ -283,8 +285,18 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
       },
       y: {
         nice: true
+      },
+      x: {
+        type: 'band',
+        paddingInner: 0.01
       }
     }
+    if (this.name === 'bar' || this.name === 'percentage-bar-stack' || this.name === 'waterfall') {
+      scale.x.paddingInner = -0.21
+    }
+    if (this.name === 'bar-group') {
+      scale.x.paddingInner = -0.1
+    }
     const basicStyle = parseJson(chart.customAttr).basicStyle
     const { radiusColumnBar, columnBarRightAngleRadius } = basicStyle
     let style
@@ -302,6 +314,21 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
         radius: 0
       }
     }
+    let columnWidthRatio
+    const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
+    if (_v >= 1 && _v <= 100) {
+      columnWidthRatio = _v / 100.0
+    } else if (_v < 1) {
+      columnWidthRatio = 1 / 100.0
+    } else if (_v > 100) {
+      columnWidthRatio = 1
+    }
+    if (columnWidthRatio) {
+      style = {
+        ...style,
+        columnWidthRatio
+      }
+    }
     return {
       ...options,
       children: [
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-stack-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-stack-bar.ts
index 22dab707c0..dfff4b51d5 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-stack-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-stack-bar.ts
@@ -76,6 +76,7 @@ export class GroupStackBar extends StackBar {
     const tooltipOptions: ViewSpec = {
       tooltip: tooltipMap,
       interaction: {
+        ...children[0].interaction,
         tooltip: {
           mount: createTooltipWrapper(chart),
           css: tooltipCss(tooltip),
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/horizontal-bar.ts
index da518ff1d0..c86001d717 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/horizontal-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/horizontal-bar.ts
@@ -10,6 +10,7 @@ import { Bar } from '@/views/chart/components/js/panel/charts/g2/bar/bar'
 import { getLineDash, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { Chart } from '@antv/g2'
+import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
 
 const { t } = useI18n()
 /**
@@ -60,7 +61,7 @@ export class HorizontalBar extends Bar {
         ? setGradientColor(hexColorToRGBA(ele, basicStyle.alpha), true)
         : hexColorToRGBA(ele, basicStyle.alpha)
     )
-    const style = {
+    let style = {
       ...(basicStyle.radiusColumnBar === 'topRoundAngle' && {
         radiusTopLeft: basicStyle.columnBarRightAngleRadius,
         radiusTopRight: basicStyle.columnBarRightAngleRadius
@@ -71,6 +72,27 @@ export class HorizontalBar extends Bar {
       ...(basicStyle.radiusColumnBar !== 'topRoundAngle' &&
         basicStyle.radiusColumnBar !== 'roundAngle' && { radius: 0 })
     }
+    let columnWidthRatio
+    const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
+    if (_v >= 1 && _v <= 100) {
+      columnWidthRatio = _v / 100.0
+    } else if (_v < 1) {
+      columnWidthRatio = 1 / 100.0
+    } else if (_v > 100) {
+      columnWidthRatio = 1
+    }
+    if (columnWidthRatio) {
+      style = {
+        ...style,
+        columnWidthRatio
+      }
+    }
+    if (this.name === 'bar-stack-horizontal' || this.name === 'progress-bar') {
+      children[0].scale.x = {
+        type: 'band',
+        paddingInner: 0.01
+      }
+    }
     children[0].scale.color.range = colors
     children[0].scale.y.nice = true
     children[0].style = { ...children[0].style, ...style }
@@ -233,7 +255,11 @@ export class HorizontalBar extends Bar {
       coordinate: { transform: [{ type: 'transpose' }] },
       scale: {
         color: { range: [] },
-        y: { nice: true }
+        y: { nice: true },
+        x: {
+          type: 'band',
+          paddingInner: -0.21
+        }
       }
     })
   }
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-bar.ts
index 83e8f4cae5..71ecb011f2 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-bar.ts
@@ -82,6 +82,7 @@ export class PercentageStackBar extends GroupStackBar {
     const tooltipOptions: ViewSpec = {
       tooltip: tooltipMap,
       interaction: {
+        ...children[0].interaction,
         tooltip: {
           mount: createTooltipWrapper(chart),
           css: tooltipCss(tooltip),
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-horizontal-bar.ts
index ec745742a5..039c5bf1c3 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-horizontal-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/percentage-stack-horizontal-bar.ts
@@ -74,6 +74,7 @@ export class PercentageStackBar extends HorizontalStackBar {
     const tooltipOptions: ViewSpec = {
       tooltip: tooltipMap,
       interaction: {
+        ...children[0].interaction,
         tooltip: {
           mount: createTooltipWrapper(chart),
           css: tooltipCss(tooltip),
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts
index d61bede184..6a10f38bf9 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts
@@ -282,6 +282,7 @@ export class ProgressBar extends HorizontalStackBar {
     const tooltipOptions: ViewSpec = {
       tooltip: a => a,
       interaction: {
+        ...children[0].interaction,
         tooltip: {
           mount: createTooltipWrapper(chart),
           css: {
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/range-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/range-bar.ts
index df970902cb..53d4c02842 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/range-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/range-bar.ts
@@ -202,6 +202,7 @@ export class RangeBar extends HorizontalBar {
         ]
       },
       interaction: {
+        ...children[0].interaction,
         tooltip: {
           mount: createTooltipWrapper(chart),
           css: tooltipCss(tooltip),
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-bar.ts
index 892db4d0f0..59bcce52d2 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-bar.ts
@@ -118,6 +118,7 @@ export class StackBar extends Bar {
     const tooltipOptions: ViewSpec = {
       tooltip: tooltipMap,
       interaction: {
+        ...children[0].interaction,
         tooltip: {
           mount: createTooltipWrapper(chart),
           css: tooltipCss(tooltip),
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-horizontal-bar.ts
index 8f97979715..6aed6a8daf 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-horizontal-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stack-horizontal-bar.ts
@@ -81,6 +81,7 @@ export class HorizontalStackBar extends HorizontalBar {
     const tooltipOptions: ViewSpec = {
       tooltip: a => a,
       interaction: {
+        ...children[0].interaction,
         tooltip: {
           mount: createTooltipWrapper(chart),
           css: tooltipCss(tooltip),
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/waterfall.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/waterfall.ts
index 4ae3bcaf41..821910c118 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/waterfall.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/waterfall.ts
@@ -6,6 +6,7 @@ import { ViewSpec, configTooltip } from '@/views/chart/components/js/panel/chart
 import { setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
 import { Bar } from '@/views/chart/components/js/panel/charts/g2/bar/bar'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
+import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
 
 const { t } = useI18n()
 
@@ -182,10 +183,11 @@ export class Waterfall extends Bar {
 
     const scale = {
       color: { range: colors },
-      y: { nice: true }
+      y: { nice: true },
+      x: { paddingInner: -0.005 }
     }
 
-    const style = {
+    let style = {
       radius:
         basicStyle.radiusColumnBar === 'roundAngle' ? basicStyle.columnBarRightAngleRadius : 0,
       ...(basicStyle.radiusColumnBar === 'topRoundAngle' && {
@@ -193,6 +195,21 @@ export class Waterfall extends Bar {
         radiusTopRight: basicStyle.columnBarRightAngleRadius
       })
     }
+    let columnWidthRatio
+    const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
+    if (_v >= 1 && _v <= 100) {
+      columnWidthRatio = _v / 100.0
+    } else if (_v < 1) {
+      columnWidthRatio = 1 / 100.0
+    } else if (_v > 100) {
+      columnWidthRatio = 1
+    }
+    if (columnWidthRatio) {
+      style = {
+        ...style,
+        columnWidthRatio
+      }
+    }
 
     return {
       ...options,