Apex Chart donut chart how to change tooltip background colors?

Question

How can I change the tooltip background colors? They aren't same with series. I also tried to use "fillSeriesColor" but it didn't worked. Can anyone help me? I tried to change them from css but i couldn't find.

Answer 1

As you've mentioned, there are two ways to do this. The approach you choose depends on the result you're after.

---

Using fillSeriesColor

This approach relies on you first providing the colors separately in the chart options, as well as setting the fillSeriesColor to true.

var options = {
  colors: ['#FF0000', '#00FF00'],
  tooltip: {
    fillSeriesColor: true,
  },
};

It's worth noting that because you're providing colors this will also affect how the chart series are displayed.

---

Using CSS

If you only want to style the tooltip without affecting the colors used for the series, you can style the tooltip using CSS. For this to work properly you may have to set the tooltip theme to false .

var options = {
  tooltip: {
    theme: false,
  },
};

You should then be able to style using the .apexcharts-tooltip class selector.

.apexcharts-tooltip {
    background: lightblue;
    color: darkblue;
}