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>();}
Hi,
We tried making the name property of our TelerikChartSeries dynamic by binding it to a string value. This however seems to completely crash startup, the browser tab freezes and the console doesn't show any errors. If we just put in a simple string in the Name property the application runs without a problem.
<TelerikChartSeries Type="ChartSeriesType.Column" Name="@Team1Name" Data="@Results" Field="@nameof(ChartViewModel.Team1Score)" CategoryField="@nameof(ChartViewModel.CategoryName)">
<TelerikChartSeriesLabels Visible="true" />
</TelerikChartSeries>As you can see in this example we're binding the Name property to Team1Name which can be changed whenever another team is selected from a dropdownlist.
Thank you in advance.
The idea is to ensure labels don't render on top of each other. If series values are close to each other, labels start overlapping. Having tooltips will let me remove the labels.
Example:
