change color of single dataLabel in ApexCharts

Question

I want to change dataLabel color for specific value in my bar chart.

documentation says:

Also, if you are rendering a bar/pie/donut/radialBar chart, you can pass a function which returns color based on the value.

I know this is for bar colors but I tried to use it in dataLabel colors. of course it didn't work. any idea how to do it?

my codepen: https://codepen.io/osmanyasircankaya/pen/gOXELmB

 style: {
  colors: [
    function ({ w }) {
      if (w.config.series[0].data[4] > 3) {
        return "#ff0014";
      } else {
        return "#1f52b0";
      }
    },
  ],
},

docs:

https://apexcharts.com/docs/options/colors/

https://apexcharts.com/docs/options/datalabels/

Answer 1

In your function you checking value of single dataPoint over and over data[4]. What you need to do is checking current series and dataPoint like this:

   function ({ seriesIndex,dataPointIndex,  w }) {
     if (w.config.series[seriesIndex].data[dataPointIndex] > 3) {
       return "#ff0014";
     } else {
       return "#1f52b0";
     }
   },