I have just installed ChartJs.Blazor.Forked (0.2.0) and defined a pie chart. I took the sample from GitHub and adjusted it so I could populate the chart with data from an async service.
The odd part is that the chart will draw and draw correctly. But once it has drawn, then I receive this JSException.
Microsoft.JSInterop.JSException: Could not find a chart with the given id. 247b9e4a-42ce-4ba3-9b1b-ebe8e90ebadc at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at ChartJs.Blazor.Chart.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)Blazor code:
@if (isSetupComplete) {<MudCard><MudCardHeader><MudText Typo="Typo.h5" Align="Align.Center" Style="color:steelblue"># of Patients by Gender</MudText></MudCardHeader><Chart Config="_pieConfig" @ref="_pieChart" Width="300" Height="300"></Chart></MudCard> }</MudItem>C# code is:
protected async override Task OnInitializedAsync() { await base.OnInitializedAsync(); PageNotification.SetProcessing(true); try { #region Populate Data ... #endregion _pieConfig = new PieConfig { Options = new PieOptions { Responsive = true, Title = new OptionsTitle { Display = true, Text = "# of Patients by Gender" } } }; PieDataset<int> dataset = new PieDataset<int>(genderValues) { BackgroundColor = new[] { ColorUtil.ColorHexString(255, 205, 86), // Slice 2 aka "Yellow" ColorUtil.ColorHexString(54, 162, 235), // Slice 4 aka "Blue" } }; _pieConfig.Data.Datasets.Add(dataset); foreach (string gender in genderLabels) { _pieConfig.Data.Labels.Add(gender); } PageNotification.StateChanged(); } catch (Exception ex) { PageNotification.AddException(ex); } Done: isSetupComplete = true; PageNotification.SetProcessing(false); }