From 9ffc30f7b108f7148360e491d251432f7cae2bfd Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Fri, 12 Sep 2025 00:04:16 +0530
Subject: [PATCH] [WEB-4889] refactor: add fill in bar chart bar stroke (#7776)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ♻️ refactor: add fill in barchart bar stroke

* ♻️ refactor: added fill in the circle
---
 packages/propel/src/charts/bar-chart/bar.tsx  | 14 ++++----------
 packages/propel/src/charts/bar-chart/root.tsx |  3 ++-
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/propel/src/charts/bar-chart/bar.tsx b/packages/propel/src/charts/bar-chart/bar.tsx
index 558e73ad6..55ddd7934 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 23a211432..a0ea10d3c 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 (