How to set font color for chart tooltip and menu?

[sam-wheat]

I use ApexCharts with MudBlazor. When I use the dark theme the font color for the chart tooltip is white on white background as is the font color for the hamburger menu. How do I change that color? Have seen this doc. Thanks.

[digitaldirk]

I use this and MudBlazor as well.

To fix the tooltip text color use Mud components inside ApexPointTooltip (More info: https://apexcharts.github.io/Blazor-ApexCharts/features/tooltip)

<ApexPointTooltip>
  <MudPaper Class="pa-2">
    <MudText Typo="Typo.h6">Your data here</MudText>
  </MudPaper>
</ApexPointTooltip>

I haven't figured out the hamburger menu yet but for example you can set the axis style like (more info: https://apexcharts.github.io/Blazor-ApexCharts/features/axis):

private AxisLabelStyle chartAxisLabelStyle
{
  get => new AxisLabelStyle
  {
    Colors = new ApexCharts.Color(new List<string> { (ThemeService._isDarkMode ? "white" : "black") })
  };
}

and then do something like:

options.Xaxis.Labels.Style = chartAxisLabelStyle;

or just something like for the legend:

options.Legend.Labels.Colors = ThemeService._isDarkMode ? "white" : "black";

[sam-wheat]

@digitaldirk Thank you. Based on your comment I discovered the entire chart can be placed in MudPaper which fixes both tooltip and menu:

<MudPaper Style="color:black;background-color:white;">
    <ApexChart>...</ApexChart>
</MudPaper>

[digitaldirk]

For future reference my final solution is:

I wrapped the chart in a MudPaper with dark/light style:

<MudPaper Style="@(ThemeService._isDarkMode ? "color:white;background-color:black" : "color:black;background-color:white")">
  <ApexChart...

Then I still had to do the label/legend styles like in my first comment (when in dark mode, the text was hard to read, but by using the option styling the text looks a lot better).

I couldn't get the download hamburger menu to have a dark background in dark mode, for my purposes I just hid it. I was able to set the text color via the MudPaper styling though (so white background with a different text color).

I customized the tooltip as I did in my first comment

Result: