After updating the chart data, some elements remain in the DOM. This can clutter the browser if the data updates come in on intervals and the chart remains in operation for a while. A screenshot is attached below.
MCVE:
@
using
Telerik.Blazor
@
using
Telerik.Blazor.Components.Button
@
using
Telerik.Blazor.Components.Chart
<h3>Chart</h3>
<TelerikButton Primary=
"true"
@onclick=
"AddDataPoint"
>Add data point</TelerikButton>
<TelerikChart Transitions=
"false"
>
<TelerikChartSeriesItems>
<TelerikChartSeries Type=
"ChartSeriesType.Line"
Name=
"CPU Usage Data"
Data=
"@simpleData"
>
</TelerikChartSeries>
</TelerikChartSeriesItems>
<TelerikChartValueAxes>
<TelerikChartValueAxis Max=
"100"
Color=
"black"
></TelerikChartValueAxis>
</TelerikChartValueAxes>
<TelerikChartTitle Text=
"CPU Usage"
></TelerikChartTitle>
<TelerikChartLegend Position=
"Telerik.Blazor.ChartLegendPosition.Bottom"
>
</TelerikChartLegend>
</TelerikChart>
@code {
void
AddDataPoint()
{
Random random =
new
Random();
var _val = Math.Round((random.NextDouble() * 100), 3);
if
(simpleData.Count >= 60)
{
simpleData = simpleData.TakeLast(59).ToList();
}
simpleData.Add(_val);
//StateHasChanged();
}
public
List<
object
> simpleData =
new
List<
object
>();
}