Blazor-apexcharts not fully functional with ServerPreRendered Blazor Application

Question

I have been scratching my head about choosing a chart provider and all the arrows points straight towards apex however, it seems impossible to access all the functionality of an apex chart. Using java interop to control the chart does not work. From the past 4 hours I have been testing and doing research which by the way, very minimal information about blazor and apex charts, and so far no success. I just came to a conclusion that Apex Charts does work but not as you would expect. For example, I want to control the animation and duration but in doing so and regarding ApexCharts documentation, it literally just does not work even when there are no errors, it just simply does not either display the chart or have 0 affect at all when trying to control these.

I cannot provide code as it is currently very clustered and nothing at this point makes sense. Opting to choose another provider since apex is just useless with Blazor ServerPreRendered.

If anyone has experience on how to do control the chart from js interop or plain c# code, it would be HIGHLY APPRECIATED !

All that is working now is this:

<ApexChart TItem="MyData" Title="Sample Data"  >                                          
                                        <ApexPointSeries TItem="MyData" Items="Data" Name="Sales" SeriesType="SeriesType.Bar" XValue="e => e.Category" YValue="e=> e.Sales" />
                                        <ApexPointSeries TItem="MyData" Items="Data" Name="Transfers" SeriesType="SeriesType.Bar" XValue="e => e.Category" YValue="e=> e.Transfers" />
                                    </ApexChart>

Answer 1

Update: To dynamically control the X and Y axis values in ApexCharts using Blazor, you may want to consider using a combination of C# code and JavaScript Interop. Here's a simplified example to guide you:

1. Define your ApexChart component in the Blazor file:

2. In the code section, use JavaScript Interop to set the data dynamically:

   @inject IJSRuntime JSRuntime

   @code { private List data = GetData(); // Your data source

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initializeChart", "myChart", data);
        }
    }
   
    private List<MyData> GetData()
    {
        // Implement your data retrieval logic here
        // Ensure it matches the structure expected by ApexCharts
        return new List<MyData> { /* Your data items */ };
    }
   

   }

3. Implement the JavaScript function in your wwwroot/js/script.js (or equivalent) file:

    window.initializeChart = (chartId, data) => {
    const options = {
        // Configure your chart options here
    };
   
    const series = [{
        name: 'Sales',
        data: data.map(item => ({ x: item.Category, y: item.Sales }))
    }, {
        name: 'Transfers',
        data: data.map(item => ({ x: item.Category, y: item.Transfers }))
    }];
   
    const chart = new ApexCharts(document.getElementById(chartId), {
        chart: options,
        series: series
    });
   
    chart.render();
   

   };

This example assumes that MyData has properties like Category, Sales, and Transfers. Adjust the property names based on your actual data structure.

In summary, the C# code fetches data and uses JavaScript Interop to initialize the ApexChart dynamically with the desired X and Y axis values. This way, you have more control over the data binding and can set the series programmatically.

I would suggest you to do proper configuration for ApexCharts, Example of configuring ApexCharts with options:

    <ApexChart TItem="MyData" Title="Sample Data" Options="chartOptions">
    <!-- Chart series here -->
</ApexChart>

@code {
    private ApexOptions chartOptions = new ApexOptions
    {
        Chart = new ApexChartOptions
        {
            // Set chart options, including animation settings
            // For example:
            Animations = new ApexAnimations
            {
                Enabled = true,
                Speed = 1000 // Animation duration in milliseconds
            }
        }
    };
}

Try it out.