Exception when rendering tooltip after point count changed

[Andrew Jank]

I get the following exception when tooltip is enabled, and I change my dataset from large to small. (30 day range to 1 day range). I am using a line chart and my guess is that the series and the point index are not up to date with each other.

System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
   at Syncfusion.Blazor.Charts.SfChart.TooltipEventTriggered(ITooltipRenderEventArgs args)
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0(Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.PostAsync[TState](Task antecedent, Action`1 callback, TState state)

[Durga Gopalakrishnan]

Hi Andrew,

Greetings from Syncfusion.

We have ensured your reported scenario by changing the 30 days data to 1 day on button click. Chart series tooltip is displayed properly before and after changing the data point count. We have attached the tested sample and screenshot for your reference.

GIF : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataChange1806516011.zip

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataChange-718769341.zip

If you are still facing problem, please try to replicate an issue in above sample and replication steps or video so that it will be helpful to validate this case further and provide you the solution sooner.

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Andrew Jank]

I have replicated the issue. I have also attached a video demonstrating this behavior. This is my Home.razor:

@page "/"
@rendermode InteractiveServer
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
<SfButton OnClick="ChangeDataWeek" IsPrimary="true" Content="Week"></SfButton>
<SfButton OnClick="ChangeDataMonth" IsPrimary="true" Content="Month"></SfButton>
<SfChart>
    <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical">
        <ChartCrosshairLine Color="purple"></ChartCrosshairLine>
    </ChartCrosshairSettings>
    <ChartEvents TooltipRender="OnToolTipRender" />
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries Width="2" DataSource="@Data" XName="XValue" YName="YValue" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true"></ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
</SfChart>


@code {


    private void OnToolTipRender(TooltipRenderEventArgs args)
    {
    }


    private async Task UpdateDataWeekAsync()
    {
        await Task.Delay(1000);


        var data = new List<ChartData>();
        var starTime = new DateTime(2024, 9, 25);
        var random = new Random();
        for (int i = 0; i < 168; i++)
        {
            data.Add(new ChartData() { XValue = starTime.AddHours(i), YValue = random.NextInt64(600, 700) });
        }


        Data = data;
        StateHasChanged();
    }


    private async Task UpdateDataMonthAsync()
    {
        await Task.Delay(1000);


        Data = GetMonthData();
        StateHasChanged();
    }


    public void ChangeDataMonth()
    {
        _ = UpdateDataMonthAsync();
    }


    public void ChangeDataWeek()
    {
        _ = UpdateDataWeekAsync();
    }


    public class ChartData
    {
        public DateTime XValue { get; set; }
        public double YValue { get; set; }
    }


    public List<ChartData> Data = GetMonthData();


    private static List<ChartData> GetMonthData()
    {
        var data = new List<ChartData>();
        var starTime = new DateTime(2024, 9, 1);
        var random = new Random();
        for (int i = 0; i < 730; i++)
        {
            data.Add(new ChartData() { XValue = starTime.AddHours(i), YValue = random.NextInt64(600, 700) });
        }


        return data;
    }
}

[Andrew Jank]

Sorry, I attached the wrong video. This is the correct one.

Attachment: 20241002_162412_7645016e.zip

[Durga Gopalakrishnan]

Andrew,

We have considered your reported scenario as bug and logged a defect report for the issue ”Console error while displaying tooltip after data update”. This fix will be available in our weekly patch release which is scheduled to be rolled out on 15^th October 2024. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback : https://www.syncfusion.com/feedback/61780/console-error-while-displaying-tooltip-after-data-update

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

[Durga Gopalakrishnan]

Andrew,

We are glad to announce that our v27.1.53 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor.Charts NuGet package.

Root Cause:

Occasionally, the point index from the tooltip render event corresponded to the previous series count from the script when updating the series.

Fix:

A condition was added to prevent unnecessary data from being processed in the tooltip render event by returning early when appropriate.

NuGet Package : https://www.nuget.org/packages/Syncfusion.Blazor.Charts/

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Tooltip-707061037.zip

Feedback : https://www.syncfusion.com/feedback/61780/console-error-while-displaying-tooltip-after-data-update

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.