From f578268627d89de2adace46bf3174d942c85a999 Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Wed, 10 Sep 2025 17:16:48 +0530
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=94=A7=20fix:=20dynamic=20bar=20color?=
 =?UTF-8?q?=20handling=20and=20refactored=20color=20retrieval=20logic.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/propel/src/charts/bar-chart/root.tsx | 51 ++++++++++++++++---
 1 file changed, 43 insertions(+), 8 deletions(-)

diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx
index 0d34b27836e..3c4233ae207 100644
--- a/packages/propel/src/charts/bar-chart/root.tsx
+++ b/packages/propel/src/charts/bar-chart/root.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 "use client";
 
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import {
   BarChart as CoreBarChart,
   Bar,
@@ -21,6 +21,8 @@ import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
 import { CustomTooltip } from "../components/tooltip";
 import { barShapeVariants } from "./bar";
 
+const DEFAULT_BAR_FILL_COLOR = "#000000";
+
 export const BarChart = React.memo(<K extends string, T extends string>(props: TBarChartProps<K, T>) => {
   const {
     data,
@@ -44,21 +46,55 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
   const [activeLegend, setActiveLegend] = useState<string | null>(null);
 
   // derived values
-  const { stackKeys, stackLabels, stackDotColors } = useMemo(() => {
+  const { stackKeys, stackLabels } = useMemo(() => {
     const keys: string[] = [];
     const labels: Record<string, string> = {};
-    const colors: Record<string, string> = {};
 
     for (const bar of bars) {
       keys.push(bar.key);
       labels[bar.key] = bar.label;
-      // For tooltip, we need a string color. If fill is a function, use a default color
-      colors[bar.key] = typeof bar.fill === "function" ? bar.fill({}) : bar.fill;
     }
 
-    return { stackKeys: keys, stackLabels: labels, stackDotColors: colors };
+    return { stackKeys: keys, stackLabels: labels };
   }, [bars]);
 
+  // get bar color dynamically based on payload
+  const getBarColor = useCallback(
+    (payload: any[], barKey: string) => {
+      const bar = bars.find((b) => b.key === barKey);
+      if (!bar) return DEFAULT_BAR_FILL_COLOR;
+
+      if (typeof bar.fill === "function") {
+        const payloadItem = payload?.find((item) => item.dataKey === barKey);
+        if (payloadItem?.payload) {
+          try {
+            return bar.fill(payloadItem.payload);
+          } catch (error) {
+            console.error(error);
+            return DEFAULT_BAR_FILL_COLOR;
+          }
+        } else {
+          return DEFAULT_BAR_FILL_COLOR; // fallback color when no payload data
+        }
+      } else {
+        return bar.fill;
+      }
+    },
+    [bars]
+  );
+
+  // get all bar colors
+  const getAllBarColors = useCallback(
+    (payload: any[]) => {
+      const colors: Record<string, string> = {};
+      for (const bar of bars) {
+        colors[bar.key] = getBarColor(payload, bar.key);
+      }
+      return colors;
+    },
+    [bars, getBarColor]
+  );
+
   const renderBars = useMemo(
     () =>
       bars.map((bar) => (
@@ -66,7 +102,6 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
           key={bar.key}
           dataKey={bar.key}
           stackId={bar.stackId}
-          fill={typeof bar.fill === "function" ? bar.fill({}) : bar.fill}
           opacity={!!activeLegend && activeLegend !== bar.key ? 0.1 : 1}
           shape={(shapeProps: any) => {
             const shapeVariant = barShapeVariants[bar.shapeVariant ?? "bar"];
@@ -158,7 +193,7 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
                     activeKey={activeBar}
                     itemKeys={stackKeys}
                     itemLabels={stackLabels}
-                    itemDotColors={stackDotColors}
+                    itemDotColors={getAllBarColors(payload || [])}
                   />
                 );
               }}

From 75674e9d90b7a4146afcf43f773f9d2e81d37db8 Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Wed, 10 Sep 2025 17:34:23 +0530
Subject: [PATCH 2/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor:=20updated?=
 =?UTF-8?q?=20any=20to=20Record=20in=20getBarColor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/propel/src/charts/bar-chart/root.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx
index 3c4233ae207..23a21143219 100644
--- a/packages/propel/src/charts/bar-chart/root.tsx
+++ b/packages/propel/src/charts/bar-chart/root.tsx
@@ -60,7 +60,7 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
 
   // get bar color dynamically based on payload
   const getBarColor = useCallback(
-    (payload: any[], barKey: string) => {
+    (payload: Record<string, string>[], barKey: string) => {
       const bar = bars.find((b) => b.key === barKey);
       if (!bar) return DEFAULT_BAR_FILL_COLOR;