diff --git a/packages/propel/src/charts/bar-chart/bar.tsx b/packages/propel/src/charts/bar-chart/bar.tsx
index 558e73ad603..55ddd7934b3 100644
--- a/packages/propel/src/charts/bar-chart/bar.tsx
+++ b/packages/propel/src/charts/bar-chart/bar.tsx
@@ -23,7 +23,7 @@ interface TShapeProps {
 }
 
 interface TBarProps extends TShapeProps {
-  fill: string | ((payload: any) => string);
+  fill: string;
   stackKeys: string[];
   textClassName?: string;
   showPercentage?: boolean;
@@ -108,7 +108,7 @@ const CustomBar = React.memo((props: TBarProps) => {
       <path
         d={getBarPath(x, y, width, height, topBorderRadius, bottomBorderRadius)}
         className="transition-opacity duration-200"
-        fill={typeof fill === "function" ? fill(payload) : fill}
+        fill={fill}
         opacity={opacity}
       />
       {showText && (
@@ -130,18 +130,12 @@ const CustomBarLollipop = React.memo((props: TBarProps) => {
         y1={y + height}
         x2={x + width / 2}
         y2={y}
-        stroke={typeof fill === "function" ? fill(payload) : fill}
+        stroke={fill}
         strokeWidth={DEFAULT_LOLLIPOP_LINE_WIDTH}
         strokeLinecap="round"
         strokeDasharray={dotted ? "4 4" : "0"}
       />
-      <circle
-        cx={x + width / 2}
-        cy={y}
-        r={DEFAULT_LOLLIPOP_CIRCLE_RADIUS}
-        fill={typeof fill === "function" ? fill(payload) : fill}
-        stroke="none"
-      />
+      <circle cx={x + width / 2} cy={y} r={DEFAULT_LOLLIPOP_CIRCLE_RADIUS} fill={fill} stroke="none" />
       {showPercentage && (
         <PercentageText x={x + width / 2} y={y} percentage={currentBarPercentage} className={textClassName} />
       )}
diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx
index 23a21143219..a0ea10d3ccc 100644
--- a/packages/propel/src/charts/bar-chart/root.tsx
+++ b/packages/propel/src/charts/bar-chart/root.tsx
@@ -111,9 +111,10 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
           className="[&_path]:transition-opacity [&_path]:duration-200"
           onMouseEnter={() => setActiveBar(bar.key)}
           onMouseLeave={() => setActiveBar(null)}
+          fill={getBarColor(data, bar.key)}
         />
       )),
-    [activeLegend, stackKeys, bars]
+    [activeLegend, stackKeys, bars, getBarColor, data]
   );
 
   return (