Usage example not working

[Stefan13-13]

I'm trying out Blazor-ApexCharts. I can't get the 'Usage example' to work. Does anyone know what I'm doing wrong?

What I did:

• I installed, the NuGet package (Blazor-ApexCharts 2.2.0).
• I added @using ApexCharts; to my _Imports.razor file.
• I created a new page:

@page "/chart_tester"
<h3>ChartTester</h3>

<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; }
    }
}

This is copy past from the 'Usage example' in the Readme.md.

However, the page is not showing any charts (only the <h3>ChartTester</h3> header). I also tried a couple of charts from the Demo but with the same result (empty page).

I'm using:

• Chrome browser
• Visual Studio 2022
• .NET 8.0
• I created a new Blazor Web App project. Except for my new page, no modifications.

In case it is relevant, I created my new project with the following options:

• Authentication type: None.
• Configure for HTTPS: yes.
• Interactive render mode: Server
• Interactivity location: Per page/component
• Include sample pages: yes
• Do not use top-level statements: no

[joadan]

Hi,

set the rendermodeon the page.

@rendermode InteractiveServer

[Stefan13-13]

Thanks, that works, so simple. Perhaps add it to the readme to put @rendermode InteractiveServer on the page. Thanks again.