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);
}
1