apexcharts / Blazor-ApexCharts

A blazor wrapper for ApexCharts.js
https://apexcharts.github.io/Blazor-ApexCharts
MIT License
803 stars 92 forks source link

SVG not defined #436

Closed shareonline closed 6 months ago

shareonline commented 6 months ago

After updating my project to .net 8 and removing the scripts from app i can't load apex. Even a default demo chart is not working. It breaks the page completely and gives med the following error:

Blazor-ApexCharts/js/apexcharts.esm.js:10:19

Microsoft.AspNetCore.Components.Web.ErrorBoundary: Warning: Unhandled exception rendering component: SVG is not defined ReferenceError: SVG is not defined at https://localhost:7013/_content/Blazor-ApexCharts/js/apexcharts.esm.js:10:19 at https://localhost:7013/_content/Blazor-ApexCharts/js/apexcharts.esm.js:10:10051

Microsoft.JSInterop.JSException: SVG is not defined ReferenceError: SVG is not defined at https://localhost:7013/_content/Blazor-ApexCharts/js/apexcharts.esm.js:10:19 at https://localhost:7013/_content/Blazor-ApexCharts/js/apexcharts.esm.js:10:10051 at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at ApexCharts.ApexChart`1.OnAfterRenderAsync(Boolean firstRender)

I have delted both my bin/obj folders but nothig seems to work anymore. Anybody else experiancing this? using the latest 3.1.0

shareonline commented 6 months ago

This is my very simple chart component

@using ApexCharts

<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; } = string.Empty;
        public int NetProfit { get; set; }
        public int Revenue { get; set; }
    }
}
shareonline commented 6 months ago

Hmm apparently if i add <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> Everything starts to work again. Must be local cache? Closing..