Tooltip colors for Pie/Donut charts don't reflect custom colors

[stanimirivanovde]

Description

Can't seem to change the color of the tooltip and the donut labels displayed inside the chart. I updated the colors for the legend and the actual slices but not the tooltip and inside label.

Steps to Reproduce

1. Pass in custom colors for the chart
2. Modify the legend and tooltip to use them
3. See that the tooltip is not reflected including the labels

Chart options that reproduce the issue:

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "donut",
    labels: ["Apple", "Orange", "Mango"]
  },
  fill: {
    colors: ["#f44336", "#ff9800", "#4caf50"]
  },
  series: [1, 5, 10],
  legend: {
    // Show the legend
    show: true,
    markers: {
      // Set the legend colors as the ones passed in
      fillColors: ["#f44336", "#ff9800", "#4caf50"]
    }
  },
  tooltip: {
    enabled: true,
    fillSeriesColor: true
  }
};

Expected Behavior

The tooltip and the inside labels should use the same colors as the chart slices and legend.

Screenshots

Reproduction Link

See the code here:
https://codepen.io/stanivanov/pen/WNXZvZE

[GonzaloBlanco7]

Had the same problem when forcing chart colours as you did.
To fix this issue I had assigned the same colours array used in options.fill.colors to options.colors

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "donut",
    labels: ["Apple", "Orange", "Mango"]
  },
  fill: {
    colors: ["#f44336", "#ff9800", "#4caf50"]
  },
  series: [1, 5, 10],
  legend: {
    // Show the legend
    show: true,
    markers: {
      // Set the legend colors as the ones passed in
      fillColors: ["#f44336", "#ff9800", "#4caf50"]
    }
  },
  tooltip: {
    enabled: true,
    fillSeriesColor: true
  },
  colors: ["#f44336", "#ff9800", "#4caf50"] //Add this line
};

[V1CTOR-cloud]

Had the same problem when forcing chart colours as you did. To fix this issue I had assigned the same colours array used in options.fill.colors to options.colors

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "donut",
    labels: ["Apple", "Orange", "Mango"]
  },
  fill: {
    colors: ["#f44336", "#ff9800", "#4caf50"]
  },
  series: [1, 5, 10],
  legend: {
    // Show the legend
    show: true,
    markers: {
      // Set the legend colors as the ones passed in
      fillColors: ["#f44336", "#ff9800", "#4caf50"]
    }
  },
  tooltip: {
    enabled: true,
    fillSeriesColor: true
  },
  colors: ["#f44336", "#ff9800", "#4caf50"] //Add this line
};

Thanks it helps me a lot

[V1CTOR-cloud]

I recently have a problem with tooltip im displaying in web, the problem occurs when the light theme is on, i mean THIS:

Chart theme:
light

fill theme:
custom colors,
type: solid,
opacity: 1

The tooltip is displaying fine, but the information on it shows white and the background is white so... ik this problem can be fixed changing the theme color to dark or this solution i applied:

ToolTip:
dark,
custom colors

Im changing the tooltip theme to dark, so the tooltip background changes to black and you can see now your information on color white, i've been searching about change color for the tooltip but i only can find how to change the background color on CSS, not the color text, i'm already post this issue on this repo but they closed my issue, so if someone who works on apex charts can add a way to change the info color it could be awesome.

Hope my post help anyone folks.

[stanimirivanovde]

colors: ["#f44336", "#ff9800", "#4caf50"]

This does not work for me. Are you using the latest version of apexcharts? I am and I still see the problem. Can you try fixing it in the link I posted in the description of the issue?

[stanimirivanovde]

You are right about using the color array, but I also had to remove the fillSeriesColor option in the tooltip array.

This didn't work:

fill: {
    colors: this.colors,
},
colors: this.colors,
tooltip: {
    enabled: true,
    fillSeriesColor: true,
}, 

But this does and fixes the issue:

fill: {
    colors: this.colors,
},
colors: this.colors,
tooltip: {
    enabled: true,
},