apexcharts.js
apexcharts.js copied to clipboard
Tooltip options needs a way to change color text
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.
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.
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.
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',
},