How to Change Text Color in ApexCharts Label?

[JoeGutierrez]

How can I change the text color of an ApexCharts label? The problem is the font color is too dark:

I've tried for the life of me reading through the ApexCharts docs for a solution, but all I could find was:

chart: {
    foreColor: '#ffffff'
}

I tried it on my chart, but it had no effect.

I also tried:

.apexcharts-tooltip {
  color: #ffffff !important;
}

Here are the complete settings for my chart:

var colors = [ "#008ffb", "#ffc300", "#0acf97", "#fa5c7c", "#e3eaef" ];
var options = {
        chart: {
            foreColor: '#ffffff',
            height: 412,
            type: "pie",
            toolbar: {
                show: true
            }
        },
        series: [ 9890571, 5276166, 4810254, 3823869, 3463197 ],
        labels: [ "CHINO DEVELOPMENT COMPANY", "SC DEVELOPMENT COMPANY, LLC", "RICHLAND, INC.", "SL DEVELOPMENT COMPANY, LLC", "BROOKCAL, LLC" ],
        colors: colors,
        legend: {
            show: !0,
            position: "bottom",
            horizontalAlign: "center",
            verticalAlign: "middle",
            floating: !1,
            fontSize: "14px",
            offsetX: 0,
            offsetY: 7
        },
        responsive: [{
            breakpoint: 600,
            options: {
                chart: {
                    height: 240
                },
                legend: {
                    show: !1
                }
            }
        }]
    },
    chart = new ApexCharts(document.querySelector("#simple-pie"), options);
chart.render();

Thanks for any help.

[JoeGutierrez]

Never mind, I was able to solve it. The answer is using the following CSS:

.apexcharts-tooltip span {
	color: #ffffff;
}

[dhavalveera]

Apexcharts itself their foreColor: '#FFFFFF' isn't working at all, above solution is not 100% solution as the foreColor from Apexchart isn't working at all, this is something from Apexcharts needs to work & come out with the solution

[Deshan555]

`class StackedBar extends Component {
constructor(props) {
super(props);

// Separate configurations for dataLabels and total dataLabels
const dataLabelsConfig = {
  background: {
    enabled: false,
    foreColor: '#fff',
    padding: 2,
    borderRadius: 2,
    borderWidth: 0.5,
    borderColor: '#fff',
  },
};

const totalDataLabelsConfig = {
  background: {
    enabled: true, // Change this according to your requirement
    foreColor: '#fff',
    padding: 2,
    borderRadius: 2,
    borderWidth: 0.5,
    borderColor: '#fff',
  },
};

this.state = {
  series: props.y1 || [],
  options: {
    chart: {
      fontFamily: 'Roboto, sans-serif',
      type: 'bar',
      height: '300',
      parentHeightOffset: 0,
      stacked: true,
      toolbar: {
        show: false,
      },
    },
    colors: props.barColors,
    dataLabels: {
      enabled: true,
      ...dataLabelsConfig,
    },
    plotOptions: {
      bar: {
        horizontal: props.horizontalStatus || false,
        dataLabels: {
          total: {
            enabled: true,
            offsetX: 0,
            style: {
              fontSize: '13px',
              fontWeight: 900,
              ...totalDataLabelsConfig,
            },
          },
          background: {
            ...dataLabelsConfig.background,
          },
        },
      },
    },
    stroke: {
      width: 1,
      colors: ['#fff'],
    },
    xaxis: {
      tickAmount: 10,
      grid: {
        padding: {
          left: 0,
          right: 0,
        },
      },
      categories: props.x1 || [],
      labels: {
        rotate: -0,
        tickAmount: 10,
        formatter: function (val) {
          return val;
        },
        style: {
          fontSize: '12px',
          fontWeight: 500,
          cssClass: 'apexcharts-xaxis-label',
          fontFamily: 'Roboto, sans-serif',
          foreColor: '#000',
        },
      },
    },
    yaxis: {
      title: {
        text: props.yLabale || '',
      },
    },
    legend: {
      position: 'top',
      horizontalAlign: 'left',
      offsetX: 40,
      style: {
        fontSize: '12px',
        fontWeight: 500,
        cssClass: 'apexcharts-xaxis-label',
        fontFamily: 'Roboto, sans-serif',
        foreColor: '#000',
      },
    },
  },
};

}`

In that configuration I can't change font-family or fontColor I tried foreColor: '#FFFFFF' and fontFamily: 'Roboto, sans-serif', but not working for me any solution for that ? ReactApex chart version "react-apexcharts": "^1.4.0"