You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 notfind 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.
protectedoverrideasyncTaskOnParametersSetAsync(){if(CustomerId>0){_customer=awaitKunde.GetKundeAsync(Kundennummer.ToString());if(_customeris not null){/* More Stuff is happening here */Umsatzdaten=newDictionary<int,Jahresumsatz>();for(inti=0;i<UmsatzJahre;i++){if(!Umsatzdaten.ContainsKey(i)){Umsatzdaten.Add(i,awaitcustomerService.GetCustomerDataAsync(_customer.KUND_A_NR,DateTime.Now.Year-i));}}InitChartData();}else{/* More Stuff is happening here */}}}privatevoidInitChartData(){_chartConfig=newLineConfig{Options=newLineOptions{Responsive=true,Title=newOptionsTitle{Display=true,Text=$"Umsatz der letzten {UmsatzJahre} Jahre"}}};_chartConfig.Data.Labels.Clear();_chartConfig.Data.Datasets.Clear();for(inti=1;i<=12;i++){_chartConfig.Data.Labels.Add(System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i));}for(inti=0;i<UmsatzJahre;i++){stringlbl=(DateTime.Now.Year-i).ToString();if(Umsatzdaten.ContainsKey(i)){IDataset<decimal>tmpDs=newLineDataset<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);}}}
The text was updated successfully, but these errors were encountered:
I have the same issue on a page that refreshes the displayed data every 10 seconds.
I just had a quick look at the base chart class and it appears to use an ID from the Config for the chart component. Since the Config is being recreated, a new ID is being generated. This means that Blazor cannot locate the original chart component to check for changes in the DOM.
Workaround: Do not recreate the Config instance within the InitChartData() method. Create an instance in the Page Initialize() method, and then update the properties, such as Options. You will need to keep the original Config instance so the ID doesn't change.
Possible Fix: Allow the ID to be specified in the Config constructor, or make the ID property read/write.
Note that this means that all sample code where this technique is being used will need to be changed as well.
Edit: Alternatively, just move the CanvasId into the Chart component. I have submitted a PR with this.
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?
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 inOnParametersSetAsync()
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.
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.
The text was updated successfully, but these errors were encountered: