apexcharts.js icon indicating copy to clipboard operation
apexcharts.js copied to clipboard

Tooltip options needs a way to change color text

Open V1CTOR-cloud opened this issue 2 years ago • 1 comments

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.

V1CTOR-cloud avatar Jun 15 '22 08:06 V1CTOR-cloud

i resolved my problem making a custom tooltip, but i still thinking that if you can change the background, you need to be able to interact with the text color too.

I'm not asking to make a fully customized tooltip or something, whatever you can use the custom tooltip as a did, but in my research i found so many people with this problem in stack overflow, forums etc etc...

In the docs you can find the way to do a custom tooltip, the thing that didn't tell in the docs is how to show your info/series in this tooltip, i mean how to move between the arrays on it, in my case my info and my structure its a little bit different/strange but i found the way to solve it.

this is the way that apex charts are displaying the custom tooltip:

tooltip: { custom: function({series, seriesIndex, dataPointIndex, w}) { return '<div class="arrow_box">' + '<span>' + series[seriesIndex][dataPointIndex] + '</span>' + '</div>' } }

If you want to change the color text you can change with CSS.

Hope my post help anyone.

V1CTOR-cloud avatar Jun 29 '22 11:06 V1CTOR-cloud

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] avatar Aug 28 '22 14:08 github-actions[bot]

I had the same issue about the dark mode, there is an option about the theme in the tooltip, I solved it like this

    tooltip: {
      enabled: true,
      theme:  isDark ? 'dark' : 'light',
    },

hreluz avatar Oct 28 '23 02:10 hreluz