Error: Could not find 'blazor_apexchart.renderChart' ('blazor_apexchart' was undefined)

Question

I have used blazor wrapper for apexchart.js to build a chart Component. this is my ApexChart razor component.

<BLChartContainer>

                @if (chartDetails!=null)
                {
                    <ApexChart @ref=_detailsChart TItem="LocationViseStockResponse"
                                    Title="Stocks"
                                    OnDataPointSelection=DataPointsSelected
                                    Debug>

                                <ApexPointSeries TItem="LocationViseStockResponse"
                                     Items="chartDetails"
                                     Name=""
                                     SeriesType="SeriesType.Bar"
                                     XValue="@(e => e.Location.CodeName)"
                                     YValue="@(e => e.Qty)"
                                     OrderByDescending="e=>e.X" />

                    </ApexChart>
                }

</BLChartContainer>

@code{

    private ApexChart<LocationViseStockResponse> _detailsChart;
    private SelectedData<LocationViseStockResponse> selectedData;
    private IList<LocationViseStockResponse> chartDetails;

   protected override async Task OnInitializedAsync()
   {
     _detailsChart = new();
      chartDetails= new List<LocationViseStockResponse>();
      //..
   }

   private void DataPointsSelected(SelectedData<LocationViseStockResponse> selectedData)
    {
        this.selectedData = selectedData;
        _detailsChart?.SetRerenderChart();
    }

}

but when I run the application I am getting this console error.

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Could not find 'blazor_apexchart.renderChart' ('blazor_apexchart' was undefined). Error: Could not find 'blazor_apexchart.renderChart' ('blazor_apexchart' was undefined). at https://localhost:5050/_framework/blazor.webassembly.js:1:328 at Array.forEach () at a.findFunction (https://localhost:5050/_framework/blazor.webassembly.js:1:296) at _ (https://localhost:5050/_framework/blazor.webassembly.js:1:2437) at https://localhost:5050/_framework/blazor.webassembly.js:1:3325 at new Promise () at Object.beginInvokeJSFromDotNet (https://localhost:5050/_framework/blazor.webassembly.js:1:3306) at Object.Rt [as invokeJSFromDotNet] (https://localhost:5050/_framework/blazor.webassembly.js:1:59738) at _mono_wasm_invoke_js_blazor (https://localhost:5050/_framework/dotnet.6.0.0.rbisnsgo77.js:1:193780) at wasm://wasm/00945abe:wasm-function[2588]:0x8065b

what is the exact issue??please help me ,appriciate all your helps

Selmir · Accepted Answer · 2022-01-11 21:12:59Z

2

This is probably because Blazor-ApexCharts only works if you put @using ApexCharts; in _Imports.razor and not directly in the component/page.

answered Jan 11, 2022 at 21:12

Selmir

1,2261 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Conman_123 Over a year ago

This is not true (at least for Blazor Server-side). See my answer. Leaving this comment for anyone in future to save them from the rabbit hole I went down because of a namespace conflict I had if I included it in _Imports.razor.

Selmir Over a year ago

It is (was?) true for Blazor WASM, and regarding the tags OP is using Blazor WASM not server.

Eric J. · Accepted Answer · 2022-09-15 21:23:02Z

1

I encountered this error with the project properly set up.

Closing and re-opening Visual Studio resolved the problem.

Note this issue indicating there may be a problem with hot reloading when Apex Charts is first added to a project.

answered Sep 15, 2022 at 21:23

Eric J.

151k65 gold badges353 silver badges563 bronze badges

Comments

Conman_123 · Accepted Answer · 2022-10-26 07:42:50Z

1

Make sure you include the required JS files in _Host.cshtml.

From the project Github:

In _Host.cshtml (server-side) or in index.html (client-side) add the following lines to the body tag after the _framework reference:
<script src="_content/Blazor-ApexCharts/js/apex-charts.min.js"></script>
<script src="_content/Blazor-ApexCharts/js/blazor-apex-charts.js"></script>

answered Oct 26, 2022 at 7:42

Conman_123

7117 silver badges11 bronze badges

Collectives™ on Stack Overflow

Error: Could not find 'blazor_apexchart.renderChart' ('blazor_apexchart' was undefined)

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related