Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor ApexCharts DarkMode Tooltip and Toolbar not visible

$
0
0

Blazor ApexCharts Nuget Package in Dark Mode, Tooltip and Toolbar aren't visible.ChartLightMode

ChartLightMode

ChartDarkMode

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. For Now, I have fixed that using css style

<style>.apexcharts-tooltip {    background: #f3f3f3;    color: black;}.apexcharts-menu {    color: black;}

How to fix this ?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>