Blazor ApexCharts Nuget Package in Dark Mode, Tooltip and Toolbar aren’t visible.
ChartLightMode
ChartDarkMode
@page "/myApprovals"
<MudGrid>
<MudItem xs="12" sm="6">
<div Style="height:300px;background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(232,229,231,1) 100%);">
<ApexChart TItem="Order"
Title="Detailed Risk view for each application"
Options=options>
<ApexPointSeries TItem="Order"
Items="Orders"
Name="Average Value"
XValue="e => e.Category"
SeriesType="SeriesType.Bar"
YValue="e => e.Average"
OrderByDescending="e=>e.Y"
Color="#003399" />
</ApexChart>
</div>
</MudItem></MudGrid>
@code {
private ApexChartOptions<Order> options;
private List<Order> Orders { get; set; } = new List<Order>();
private Dictionary<string, int> averageMap = new Dictionary<string, int>
{
{ "Mitigation Plan to complete", 2 },
{ "Request where additional information is required", 2 },
{ "Assessment summary yet to be acknowledged", 1 },
{ "Saved and Draft Assessments", 2 },
{ "Assessments pending for approvals", 3 },
};
protected override void OnInitialized()
{
Orders = new List<Order>();
foreach (var item in averageMap)
{
Orders.Add(new Order { Category = item.Key, Average = item.Value });
}
base.OnInitialized();
options = new ApexChartOptions<Order>
{
PlotOptions = new PlotOptions
{
Bar = new PlotOptionsBar
{
Horizontal = true
}
},
Theme = new Theme
{
Mode = Mode.Light,
Palette = PaletteType.Palette1
}
};
}
public class Order
{
public string Category { get; set; }
public int Average { get; set; }
}
}
I have tried to set Apexchart Always as Light Mode, so that Tooltip and Toolbar is visible but on toggle to DarkMode, My Tooltip and Toolbar Text color turns from black to white. How to fix this ?