diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bidirectional-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bidirectional-bar.ts
index aee7724807..dfb2018754 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bidirectional-bar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bidirectional-bar.ts
@@ -341,12 +341,22 @@ export class BidirectionalHorizontalBar extends G2ChartView {
     }
     defaultsDeep(firstMark, {
       style: {
-        fill: firstColor
+        fill: d => {
+          if (d.value === null || d.value === undefined) {
+            return 'transparent'
+          }
+          return firstColor
+        }
       }
     })
     defaultsDeep(secondMark, {
       style: {
-        fill: secondColor
+        fill: d => {
+          if (d.value === null || d.value === undefined) {
+            return 'transparent'
+          }
+          return secondColor
+        }
       }
     })
     return options