Blazor Server UI PlotlyChart not updating after page change or refresh

I'm working on a pre developed blazor server side project right now. In the home page I have a PlotlyChart which shows some data to the user

<PlotlyChart style="height: 60%; width: 100%;" @bind-Config="config" @bind-Layout="layout" @bind-Data="@DataContext.Data" @ref="@DataContext.Chart"/>


Whenever I hard code data, The chart works perfecly, But when I extract data from the database the chart shows the data but after refreshing the page or redirecting to another page and come back the chart shows empty.

First I add the StateHasChanged to my code and tried different lifecycles method but I wasnot successful to resolve the issue.

I thought maybe my data array is empty but it is not because I can write it in the console.

I found the problem after spending a day on that.

I suppose to re-invoke the js library after the page is rendered.

Here is the complete code for that

Config config = new Config()
    {
        DisplayModeBar = Plotly.Blazor.ConfigLib.DisplayModeBarEnum.False,
        Responsive = true
    };
Layout layout = new Layout()
    {
        Margin = new Plotly.Blazor.LayoutLib.Margin
        {
            B = 15,
            T = 5,
            L = 85,
            R = 2
        },
        YAxis = new System.Collections.Generic.List<YAxis>
    {
        new YAxis
        {
            Title = new Plotly.Blazor.LayoutLib.YAxisLib.Title
            {
                Text = "kWh",
                Font = new Plotly.Blazor.LayoutLib.YAxisLib.TitleLib.Font
                {
                    Family = "Font Awesome 5 Free",
                    Size = 12
                }
            }
        }
    }
    };

protected override void OnAfterRender(bool firstRender)
{
    var scatter = new Scatter
    {
        Name = "ScatterTrace",
        // Here we'll use dates on the X axis. More info here: https://plotly.com/javascript/time-series/
        X = DataContext.XData,
        Y = DataContext.YData,
        HoverInfo = Plotly.Blazor.Traces.ScatterLib.HoverInfoFlag.Y,
        Line = new Plotly.Blazor.Traces.ScatterLib.Line
        {
            Color = "rgb(3, 181, 133)" // switch over to variable
        }
    };

    InvokeAsync(async () =>
    {
        try
        {
            await DataContext.Chart.AddTrace(scatter);
        }
        catch (Exception e)
        {
            Console.WriteLine(e.Message, "Caught exception while adding new plot trace");
        }
    }).IgnoreAwait();

    base.OnAfterRender(firstRender);
}