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
The missing piece was just on top of the page.
@rendermode InteractiveServer