Merge branch 'main' of https://github.com/apexcharts/apexcharts.js

Author: junedchhipa

src/charts/Bar.js

@@ -319,10 +319,34 @@ 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.series[i][j],
+              dataPointIndex: j,
+              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) {
@@ -545,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,
@@ -578,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,
     }

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