diff --git a/src/components/react_canvas/bar_geometries.test.tsx b/src/components/react_canvas/bar_geometries.test.tsx
new file mode 100644
index 0000000000..dcddcf2d78
--- /dev/null
+++ b/src/components/react_canvas/bar_geometries.test.tsx
@@ -0,0 +1,35 @@
+import { buildBarProps } from './bar_geometries';
+
+describe('[canvas] Bar Geometries', () => {
+  test('can build bar props', () => {
+    const props = buildBarProps({
+      index: 1,
+      x: 10,
+      y: 20,
+      width: 30,
+      height: 40,
+      fill: 'red',
+      stroke: 'blue',
+      strokeWidth: 1,
+      borderEnabled: true,
+      geometryStyle: {
+        opacity: 0.5,
+      },
+    });
+    expect(props).toEqual({
+      key: `bar-1`,
+      x: 10,
+      y: 20,
+      width: 30,
+      height: 40,
+      fill: 'red',
+      stroke: 'blue',
+      strokeWidth: 1,
+      strokeEnabled: true,
+      strokeHitEnabled: false,
+      perfectDrawEnabled: false,
+      listening: false,
+      opacity: 0.5,
+    });
+  });
+});
diff --git a/src/components/react_canvas/bar_geometries.tsx b/src/components/react_canvas/bar_geometries.tsx
index 4dcac43202..bfefab2e2e 100644
--- a/src/components/react_canvas/bar_geometries.tsx
+++ b/src/components/react_canvas/bar_geometries.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Group, Rect } from 'react-konva';
 import { animated, Spring } from 'react-spring/renderprops-konva.cjs';
 import { LegendItem } from '../../lib/series/legend';
-import { BarGeometry, getGeometryStyle } from '../../lib/series/rendering';
+import { BarGeometry, GeometryStyle, getGeometryStyle } from '../../lib/series/rendering';
 import { BarSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme';
 import { GlobalKonvaElementProps } from './globals';
 
@@ -47,7 +47,7 @@ export class BarGeometries extends React.PureComponent<
       style: { border },
       sharedStyle,
     } = this.props;
-    return bars.map((bar, i) => {
+    return bars.map((bar, index) => {
       const { x, y, width, height, color } = bar;
 
       // Properties to determine if we need to highlight individual bars depending on hover state
@@ -69,43 +69,80 @@ export class BarGeometries extends React.PureComponent<
       const borderEnabled = border.visible && width > border.strokeWidth * 7;
       if (this.props.animated) {
         return (
-          <Group key={i}>
+          <Group key={index}>
             <Spring native from={{ y: y + height, height: 0 }} to={{ y, height }}>
-              {(props: { y: number; height: number }) => (
-                <animated.Rect
-                  key="animatedRect"
-                  x={x}
-                  y={props.y}
-                  width={width}
-                  height={props.height}
-                  fill={color}
-                  strokeWidth={border.strokeWidth}
-                  stroke={border.stroke}
-                  strokeEnabled={borderEnabled}
-                  {...GlobalKonvaElementProps}
-                  {...geometryStyle}
-                />
-              )}
+              {(props: { y: number; height: number }) => {
+                const barProps = buildBarProps({
+                  index,
+                  x,
+                  y: props.y,
+                  width,
+                  height: props.height,
+                  fill: color,
+                  stroke: border.stroke,
+                  strokeWidth: border.strokeWidth,
+                  borderEnabled,
+                  geometryStyle,
+                });
+
+                return <animated.Rect {...barProps} />;
+              }}
             </Spring>
           </Group>
         );
       } else {
-        return (
-          <Rect
-            key={i}
-            x={x}
-            y={y}
-            width={width}
-            height={height}
-            fill={color}
-            strokeWidth={border.strokeWidth}
-            stroke={border.stroke}
-            strokeEnabled={borderEnabled}
-            {...GlobalKonvaElementProps}
-            {...geometryStyle}
-          />
-        );
+        const barProps = buildBarProps({
+          index,
+          x,
+          y,
+          width,
+          height,
+          fill: color,
+          stroke: border.stroke,
+          strokeWidth: border.strokeWidth,
+          borderEnabled,
+          geometryStyle,
+        });
+        return <Rect {...barProps} />;
       }
     });
   }
 }
+
+export function buildBarProps({
+  index,
+  x,
+  y,
+  width,
+  height,
+  fill,
+  stroke,
+  strokeWidth,
+  borderEnabled,
+  geometryStyle,
+}: {
+  index: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+  borderEnabled: boolean;
+  geometryStyle: GeometryStyle;
+}) {
+  return {
+    key: `bar-${index}`,
+    x,
+    y,
+    width,
+    height,
+    fill,
+    strokeWidth,
+    stroke,
+    strokeEnabled: borderEnabled,
+    ...GlobalKonvaElementProps,
+    ...geometryStyle,
+  };
+}
diff --git a/src/components/react_canvas/line_geometries.test.tsx b/src/components/react_canvas/line_geometries.test.tsx
index 114558a624..bad42d42b7 100644
--- a/src/components/react_canvas/line_geometries.test.tsx
+++ b/src/components/react_canvas/line_geometries.test.tsx
@@ -75,5 +75,6 @@ describe('[canvas] Line Geometries', () => {
       perfectDrawEnabled: false,
       listening: false,
     });
+    expect(props.fill).toBeFalsy();
   });
 });