From fd2d81dd83592ee09c937ebad3750db9be37d873 Mon Sep 17 00:00:00 2001
From: Digvijayrao Jadhav <digvijayrao.jadhav@kornferry.com>
Date: Mon, 1 Apr 2024 16:17:11 +0530
Subject: [PATCH 1/3] added color evaluation function in Bar.js under stroke
 prop and update ApexStroke type definition

---
 src/charts/Bar.js     | 30 +++++++++++++++++++++++++++++-
 types/apexcharts.d.ts |  2 +-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/charts/Bar.js b/src/charts/Bar.js
index 300ac3f4c..ae4e30507 100644
--- a/src/charts/Bar.js
+++ b/src/charts/Bar.js
@@ -319,10 +319,38 @@ class Bar {
     const graphics = new Graphics(this.ctx)
 
     if (!lineFill) {
+     // if user provided a function in colors, we need to eval here
+      // Note: the position of this function logic (ex. stroke: { colors: ["",function(){}] }) i.e array index 1 depicts the realIndex/seriesIndex.
+      function fetchColor(i) {
+        const exp = w.config.stroke.colors
+        let c
+        if (Array.isArray(exp) && exp.length > 0) {
+          c = exp[i]
+          if (!c) c = ''
+          if (typeof c === 'function') {
+            return c({
+              value: w.globals.axisCharts
+                ? w.globals.series[i][j]
+                  ? w.globals.series[i][j]
+                  : 0
+                : w.globals.series[i],
+              dataPointIndex: i,
+              w,
+            })
+          }
+        }
+        return c
+      }
+
+      const checkAvailableColor =
+        typeof w.globals.stroke.colors[realIndex] === 'function'
+          ? fetchColor(realIndex)
+          : w.globals.stroke.colors[realIndex]
+
       /* fix apexcharts#341 */
       lineFill = this.barOptions.distributed
         ? w.globals.stroke.colors[j]
-        : w.globals.stroke.colors[realIndex]
+        : checkAvailableColor
     }
 
     if (w.config.series[i].data[j] && w.config.series[i].data[j].strokeColor) {
diff --git a/types/apexcharts.d.ts b/types/apexcharts.d.ts
index 66667d577..de397e1fd 100644
--- a/types/apexcharts.d.ts
+++ b/types/apexcharts.d.ts
@@ -344,7 +344,7 @@ type ApexStroke = {
   show?: boolean
   curve?: 'smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic' | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[]
   lineCap?: 'butt' | 'square' | 'round'
-  colors?: string[]
+  colors?: any[] | string[]
   width?: number | number[]
   dashArray?: number | number[]
   fill?: ApexFill

From f9d1967b0dbf4354aaff78779debc92217c44fa3 Mon Sep 17 00:00:00 2001
From: Digvijayrao Jadhav <digvijayrao.jadhav@kornferry.com>
Date: Mon, 1 Apr 2024 16:18:33 +0530
Subject: [PATCH 2/3] updated space

---
 src/charts/Bar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/charts/Bar.js b/src/charts/Bar.js
index ae4e30507..4290ce88d 100644
--- a/src/charts/Bar.js
+++ b/src/charts/Bar.js
@@ -320,7 +320,7 @@ class Bar {
 
     if (!lineFill) {
      // if user provided a function in colors, we need to eval here
-      // Note: the position of this function logic (ex. stroke: { colors: ["",function(){}] }) i.e array index 1 depicts the realIndex/seriesIndex.
+     // Note: the position of this function logic (ex. stroke: { colors: ["",function(){}] }) i.e array index 1 depicts the realIndex/seriesIndex.
       function fetchColor(i) {
         const exp = w.config.stroke.colors
         let c

From 2af1fcace6ee988087dbd8f654e7affeb421d517 Mon Sep 17 00:00:00 2001
From: Digvijayrao Jadhav <digvijayrao.jadhav@kornferry.com>
Date: Fri, 5 Apr 2024 12:57:58 +0530
Subject: [PATCH 3/3] Worked on pr reviews & file auto formatted

---
 src/charts/Bar.js | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/charts/Bar.js b/src/charts/Bar.js
index 4290ce88d..fac10ba0e 100644
--- a/src/charts/Bar.js
+++ b/src/charts/Bar.js
@@ -319,8 +319,8 @@ class Bar {
     const graphics = new Graphics(this.ctx)
 
     if (!lineFill) {
-     // if user provided a function in colors, we need to eval here
-     // Note: the position of this function logic (ex. stroke: { colors: ["",function(){}] }) i.e array index 1 depicts the realIndex/seriesIndex.
+      // if user provided a function in colors, we need to eval here
+      // Note: the position of this function logic (ex. stroke: { colors: ["",function(){}] }) i.e array index 1 depicts the realIndex/seriesIndex.
       function fetchColor(i) {
         const exp = w.config.stroke.colors
         let c
@@ -329,12 +329,8 @@ class Bar {
           if (!c) c = ''
           if (typeof c === 'function') {
             return c({
-              value: w.globals.axisCharts
-                ? w.globals.series[i][j]
-                  ? w.globals.series[i][j]
-                  : 0
-                : w.globals.series[i],
-              dataPointIndex: i,
+              value: w.globals.series[i][j],
+              dataPointIndex: j,
               w,
             })
           }
@@ -573,7 +569,11 @@ class Bar {
       }
     }
 
-    y = this.barHelpers.getYForValue(this.series[i][j], zeroH, translationsIndex)
+    y = this.barHelpers.getYForValue(
+      this.series[i][j],
+      zeroH,
+      translationsIndex
+    )
 
     const paths = this.barHelpers.getColumnPaths({
       barXPosition,
@@ -606,7 +606,14 @@ class Bar {
       pathFrom: paths.pathFrom,
       x,
       y,
-      goalY: this.barHelpers.getGoalValues('y', null, zeroH, i, j, translationsIndex),
+      goalY: this.barHelpers.getGoalValues(
+        'y',
+        null,
+        zeroH,
+        i,
+        j,
+        translationsIndex
+      ),
       barXPosition,
       barWidth,
     }