Search code examples
.netblazor.net-8.0apexcharts

Getting stuck on apexcharts / Blazor-ApexCharts in .Net 8


I do have blank Blazor project in .Net 8 and i am trying to use ApexCharts via nuget apexcharts / Blazor-ApexCharts.

I have used the demo code in a page. There are no errors but the charts just does not show up when i open the page.

Im running Blazor application created from template in visual studio in .net 8 So far i have downloaded nuget in latest version 3.3.0

_Imports.razor added @using ApexCharts

App.razor added InteractiveWebAssembly

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="DelirestLorawanWeb.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <app>
        <component type="typeof(App)" render-mode="InteractiveWebAssembly" />
    </app>
    <script src="_framework/blazor.web.js"></script>   
</body>

</html>

My page is from github

 @page "/Apex"

<ApexChart TItem="MyData"
           Title="Sample Data">

    <ApexPointSeries TItem="MyData"
                     Items="Data"
                     Name="Net Profit"
                     SeriesType="SeriesType.Bar"
                     XValue="e => e.Category"
                     YValue="e=> e.NetProfit" />

    <ApexPointSeries TItem="MyData"
                     Items="Data"
                     Name="Revenue"
                     SeriesType="SeriesType.Bar"
                     XValue="e => e.Category"
                     YValue="e=> e.Revenue" />
</ApexChart>

@code {
    private List<MyData> Data { get; set; } = new();
    protected override void OnInitialized()
    {
        Data.Add(new MyData { Category = "Jan", NetProfit = 12, Revenue = 33 });
        Data.Add(new MyData { Category = "Feb", NetProfit = 43, Revenue = 42 });
        Data.Add(new MyData { Category = "Mar", NetProfit = 112, Revenue = 23 });
    }

    public class MyData
    {
        public string Category { get; set; }
        public int NetProfit { get; set; }
        public int Revenue { get; set; }
    }
}

any tips on how to debug this, what to do would be great. Thanx


Solution

  • The missing piece was just on top of the page.

    @rendermode InteractiveServer