How to resolve error: "Could not find 'ChartJsInterop.setupChart'" - When using ChartJsBlazor

Question

Im trying to use ChartJsBlazor with my Blazor WebAssemply project in Visual Studio and I've pretty must just copied the guide from the "Getting Started" section (https://github.com/mariusmuntean/ChartJs.Blazor).

But when I run it, i get this error in the browser:

"blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer\[100\]
Unhandled exception rendering component: Could not find 'ChartJsInterop.setupChart' ('ChartJsInterop' was undefined).
Error: Could not find 'ChartJsInterop.setupChart' ('ChartJsInterop' was undefined).
...
"

Im using the NuGet packet ChartJs.Blazor.Fork (2.0.2) - And I've added the static assets to my index.html like this: "

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="." class="reload">Reload</a>
        <span class="dismiss">🗙</span>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
    <script src="_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js"></script>
</body>

My razor page code i just a replica of the "Getting startet" PieChart configuration. I have verified using the developer tool in the browser that the "ChartJsBlazorInterop.js" exists, but its empty...

I've followed the "Getting started guide step up step and i just wont work! What am I missing? I've tried adding the static assets in different orders but with no succes.

Essential the issue is: That the browser downloads an empty version of the Script "ChartJsBlazorInterop.js", when its expected to download a functional "ChartJsBlazorInterop.js" script - So the Chart can render.

Do you have the correct (non-empty) ChartJsBlazorInterop.js file on your dev machine? — kikon
– kikon, Commented May 8 at 23:10
If i refresh the web page where the chart is supposed to render, with DevTools I can se this get request: "localhost:7273/_content/ChartJs.Blazor.Fork/…" And the response body is empty... The "ChartJsBlazorInterop.js" file at that location is also empty... When i download the NuGet packet it creates a "ChartJsBlazorInterop.js" file i a "sample-data" folder, which isn't empty. — Matias Hansen
– Matias Hansen, Commented May 12 at 7:52
There seems to be an issue with your project configuration or the package installation. Try to create a new blazor project and add ChartJs.Blazor.Fork again. In my tests, I had to just dotnet add package ChartJs.Blazor.Fork and then starting the default/skeleton app (without any reference to chart.js) I was able to see the correct .js file at http://localhost:xxxx/_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js — kikon
– kikon, Commented May 12 at 8:58

RockoCH · Accepted Answer · 2025-05-14 02:43:49Z

1

I had de same issue, what i did is I copy de js file into wwwroot, and call it from index.html like this:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
    <!--<script src="_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js"></script>-->
    <script src="/js/ChartJsBlazorInterop.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>

answered May 14 at 2:43

RockoCH

213 bronze badges

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

1 Comment

Matias Hansen May 14 at 10:05

Thanks! Its working - I had to delete the original js file located in the NuGet packet to avoid conflicts, but i can render my charts!

Collectives™ on Stack Overflow

How to resolve error: "Could not find 'ChartJsInterop.setupChart'" - When using ChartJsBlazor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related