The chart SVG or canvas suddenly disappears.

[robin]

Issue: The chart SVG or canvas suddenly disappears.

Reproduction of the Problem

Use the Blazor UI from Telerik trial version.
Perform actions such as hiding the chart line or adding values.

Current Behavior

At seemingly random intervals, the chart SVG or canvas disappears. This occurs when performing actions like hiding the chart line or adding values. The issue does not occur consistently or under obvious conditions.

Expected/Desired Behavior

The chart should behave as expected and not disappear unexpectedly.

Environment

• Telerik UI for Blazor version: 5.1.1 (Trial)
• Browser: All
• App Type: Server
  

 

Video: https://www.veed.io/view/7782882d-6522-4fa6-a9df-8413695486ed?panel=share

<div style="width: 1100px; height: 500px;" class="graphBorder shadow">
    <TelerikChart Height="95%" Transitions="false">   
        <ChartSeriesItems>
            @foreach(var item in ChartData)
            {
                <ChartSeries
                    Visible="@item.ShowLine"
                    Style="ChartSeriesStyle.Smooth"
                    Type="ChartSeriesType.ScatterLine"
                    Name="@item.LineName" Data="@item.Data"
                    Color="@item.Color"
                    XField="@nameof(Data.X)" YField="@nameof(Data.Y)">
                    <ChartSeriesMarkers Size="0"/>
                    <ChartSeriesTooltip Visible="true"/>
                </ChartSeries>
            }
        </ChartSeriesItems>

        <ChartTitle Text="TestChart"></ChartTitle>

        <ChartXAxes>
            <ChartXAxis Type="date"
                        BaseUnit="minutes"
                        MajorUnit="30"
                        Min="@(new TimeOnly(0,0,0))"
                        Max="@(new TimeOnly(3,0,0))">
                <ChartXAxisTitle Text="TestChart"></ChartXAxisTitle>
                <ChartXAxisLabels Format="{0:HH:mm}"></ChartXAxisLabels>
            </ChartXAxis>
        </ChartXAxes>

        <ChartYAxes >
            <ChartYAxis Max="@(100 + 5)" Min="0" MajorUnit="10">
                <ChartYAxisLabels/>
                <ChartYAxisTitle Text="TestChart"></ChartYAxisTitle>
            </ChartYAxis>
        </ChartYAxes>

        <ChartLegend Visible="false"/>

    </TelerikChart>
     <div class="Legend d-flex justify-content-sm-around flex-row">
            @foreach(var item in ChartData)
            {
                <div>
                    <TelerikCheckBox Id="myCheckBox" @bind-Value="@item.ShowLine"/>
                    <label for="myCheckBox">@item.LineName</label>
                </div>
            }
        </div>
</div>

@code {
    public List<GraphData> ChartData = new()
    {
        new GraphData
        {
            LineName = "Stroom 1",
            ShowLine = true,
            Color = "green",
            MinDate = new TimeOnly(0, 0),
            TimeBetweenMinAndMax = new TimeSpan(4, 0, 0),
            Data = new List<Data>
            {
                new() { X = new TimeOnly(0, 0), Y = 10 },
                new() { X = new TimeOnly(0, 15), Y = 20 },
                new() { X = new TimeOnly(0, 30), Y = 12 },
                new() { X = new TimeOnly(0, 45), Y = 3 },
                new() { X = new TimeOnly(1, 0), Y = 10 },
                new() { X = new TimeOnly(1, 15), Y = 12 },
                new() { X = new TimeOnly(1, 30), Y = 14 },
                new() { X = new TimeOnly(1, 45), Y = 15 },
                new() { X = new TimeOnly(2, 0), Y = 16 },
                new() { X = new TimeOnly(2, 15), Y = 40 }
            }
        }
    };
}

[Nansi]

Hello Robin,

Thank you for the provided detailed explanation of the issue, that you are facing.

Currently, we have no information for potential issues causing the Chart to behave like this. From the provided code I don't see a cause for the problem. I cannot load the video, that you sent, because it requires access. I don't reproduce the issue if I hide the Chart line. Here is a REPL example.

Can you please send me an isolated sample that replicates the exact behavior you are hitting, so I can revise it in detail? Do you see any exceptions in the console?

Regards,
Nansi
Progress Telerik

[robin]

Hello nansi,
Thank you for replying. This exact code gives me the issue.
The issue shows itself after (what i think) is showing the demo background image,

Hereby a new link (it should work now)
https://www.veed.io/view/7782882d-6522-4fa6-a9df-8413695486ed?panel=share

Regards,
Robin

[Nansi]

Hi Robin,

Thank you for the provided video. I see how the Chart disappears on it. I also see that you are not testing it in the REPL. A possible cause in this case can be some custom CSS styling. The Chart in your example is in a <div> with a class attribute. Do you apply some CSS styles to the Chart elements via the graphBorder and shadow classes?

Overall, it's hard to assume what might be the reason without an isolated example that replicates the behavior. Are you able to provide such an example, so I can move forward with the investigation?

Regards,
Nansi
Progress Telerik