OnClick callback does not work, it throws an exception in the frontend

Describe the bug

Pretty much the title

Which Blazor project type is your bug related to?

• Server-Side I am using the release 1.0.2

Which charts does this bug apply to?

ChartJsLineChart but i haven’t tried other

To Reproduce

Steps to reproduce the behavior:

1. Setup a OnClick callback on the chart LineConfig.LineOptions
2. Go to the web browser (I tried Firefox and Chrome) and click on the chart
3. A javascript error is thrown in the frontend:

TypeError: n.onClick.call is not a function 17 Chart.min.js:7:101051
    handleEvent https://localhost:5001/_content/ChartJs.Blazor/Chart.min.js:7
    eventHandler https://localhost:5001/_content/ChartJs.Blazor/Chart.min.js:7
    i https://localhost:5001/_content/ChartJs.Blazor/Chart.min.js:7
    <anonymous> https://localhost:5001/_content/ChartJs.Blazor/Chart.min.js:7

Expected behavior

OnClick callback should be called without throwing an exception

[mariusmuntean]

So I looked into this and found the issue. Basically, the UpdateChart() function from ChartJsInterop.ts was incomplete. During an update, the new config is applied on top of the existing config, which broke the “wiring up” that is done during SetupChart which is necessary to invoke .Net methods as OnClick/OnHover handlers.

This bug is only triggered when you register .Net handlers for onClick/onHover and then you call Update() on the chart.

@db85 Calling _doughnutChartJs.Update() in OnInitialized() is dangerous if you consider the component’s lifecycle. The very first time there should be a NullPointerException because the @ref directive doesn’t populate the _doughnutChartJs variable until later (after the component is rendered). Due to prerendering, the lifecycle methods are called twice; the second time over there’s no more NPE and the call to Update() goes through, but then it triggers the bug.

At least this is my current understanding of the issue right now.

To cut a long story short, I have a working version of a fix on this branch: https://github.com/mariusmuntean/ChartJs.Blazor/tree/IssueFix/54-OnClickCallback I expect to have a new release ready during the weekend. For anyone who cannot wait until then, a workaround would be to take the ChartJsBlazorInterop.js from my IssueFix branch, add it to their wwwroot folder and reference that in their index.html/_Host.cshtml instead of the one provided by my library (I mean the one from _content).

[db85]

@mariusmuntean Thank you very much for the quick fix and the detailed answer. I have checked out your branch and it works. 👍