Description
Describe the bug
We have implemented ChartJs within a blazor page. When we go to the page everything works fine. Now if we leave the tab open for x minutes/hours, the website crashes and we get an error message.
I don't got this behaviour in Firefox yet, only in Chrome.
Which Blazor project type is your bug related to?
- Server-Side
Which charts does this bug apply to?
<Chart Config="_chartConfig" @ref="_chart" />
To Reproduce
Steps to reproduce the behavior:
We are using ChartJs v 2.0.2.
We implemented the chart in this way:
<Chart Config="_chartConfig" @ref="_chart" />
InitChartData()
is called in OnParametersSetAsync()
Now keep the page open. It can take up to a few few minutes or hours until the page crashes.
Additional context / logging
Add any additional context about the problem here.
Category: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost
EventId: 111
SpanId: 155a6ee05355f14b
TraceId: 7ba32bda0dc0df4e8fc029139ced18f9
ParentId: 0000000000000000
RequestId: 800001cb-000a-f800-b63f-84710c7967bb
RequestPath: /_blazor
TransportConnectionId: MIPBcXk0NMVBF9fEKt-Z5w
Unhandled exception in circuit 'WPZDgZ09abqTNY91AXwwP7xZwcfpPAlEnyN229qjEuw'.
Exception:
Microsoft.JSInterop.JSException: Could not find a chart with the given id. 568bdcd0-6079-42a7-86bf-c5e66f502a2a
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)
Code example
Please provide full code examples below where possible to make it easier for the developers to check your issues.
Please also add the working JavaScript equivalent so we can see what you were trying to achieve.
protected override async Task OnParametersSetAsync()
{
if (CustomerId > 0)
{
_customer = await Kunde.GetKundeAsync(Kundennummer.ToString());
if (_customer is not null)
{
/* More Stuff is happening here */
Umsatzdaten = new Dictionary<int, Jahresumsatz>();
for (int i = 0; i < UmsatzJahre; i++)
{
if(!Umsatzdaten.ContainsKey(i))
{
Umsatzdaten.Add(i, await customerService.GetCustomerDataAsync(_customer.KUND_A_NR, DateTime.Now.Year - i));
}
}
InitChartData();
}
else
{
/* More Stuff is happening here */
}
}
}
private void InitChartData()
{
_chartConfig = new LineConfig
{
Options = new LineOptions
{
Responsive = true,
Title = new OptionsTitle
{
Display = true,
Text = $"Umsatz der letzten {UmsatzJahre} Jahre"
}
}
};
_chartConfig.Data.Labels.Clear();
_chartConfig.Data.Datasets.Clear();
for (int i = 1; i <= 12; i++)
{
_chartConfig.Data.Labels.Add(System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i));
}
for (int i = 0; i < UmsatzJahre; i++)
{
string lbl = (DateTime.Now.Year - i).ToString();
if (Umsatzdaten.ContainsKey(i))
{
IDataset<decimal> tmpDs = new LineDataset<decimal>(Umsatzdaten[i].ToIEnumerable())
{
Label = lbl,
BackgroundColor = ColorUtil.FromDrawingColor(ChartHelper.GetColor(i)),
BorderColor = ColorUtil.FromDrawingColor(ChartHelper.GetColor(i)),
Fill = FillingMode.Disabled,
};
_chartConfig.Data.Datasets.Add(tmpDs);
}
}
}