await chart.ToImage() hangs if chart data has changed

[howick19]

Hi,
I need to be able to save images of plotly charts to the server to place in dynamically generated reports, so have been trying to use the ToImage() function to achieve this as below:

string i = await chart.ToImage(ImageFormat.Png, 400, 800);

Whilst I have at times been able to make this function work as expected, the trouble comes if the chart data has changed in any way. In these cases chart.ToImage just hangs and no image is saved.

I would greatly appreciate some help with this. I have tried installing earlier versions of plotly.blazor to see if this fixes the problem, but it didn't help. I have also tried re-working my code to more closely resemble the working example at https://delightful-pebble-00ab3ee10.1.azurestaticapps.net/ but to no avail.

If required I can provide some more detailed source code demonstrating the problem.

Thanks

[howick19]

Here is some simplified source code if that helps. I have based it on the working scatter plot example at https://delightful-pebble-00ab3ee10.1.azurestaticapps.net/:

@using Plotly.Blazor
@using Plotly.Blazor.Traces
@using Plotly.Blazor.LayoutLib
@using Plotly.Blazor.Traces.ScatterLib

Graph

Save plot

<PlotlyChart style="height: 60vh; min-height: 350px" @bind-Config="config" @bind-Layout="layout" @bind-Data="data" @ref="chart" />

@code {
private PlotlyChart chart;
private Config config = new()
{
Responsive = true
};

private IList<ITrace> data = new List<ITrace>
{
    new Scatter
    {
        Name = "ScatterTrace",
        Mode = ModeFlag.Lines | ModeFlag.Markers,
        X = new List<object>(),
        Y = new List<object>()
    }
};

private string imgSource;

private Layout layout = new()
    {
        Title = new Title { Text = "Scatter" },
        YAxis = new List<YAxis>
    {
        new()
        {
            Title = new Plotly.Blazor.LayoutLib.YAxisLib.Title { Text = "Scatter Unit" }
        }
    }
    };

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
    {
        await ExtendData();
    }
}

private async Task ExtendData(int count = 100)
{
    if (!(chart.Data.FirstOrDefault() is Scatter scatter))
    {
        return;
    }

    var max = (int?)scatter.X?.Max();
    List<double> x = new List<double> { 1, 2, 3, 4, 5,6 };
    List<double> y = new List<double> { 6, 8, 3, 5, 9, 1 };
    if(!scatter.X.Any() || !scatter.Y.Any())
    {
        scatter.X.AddRange(x.Cast<object>().ToList());
        scatter.Y.AddRange(y.Cast<object>().ToList());
        await chart.React();
    }
    else
    {
        await chart.ExtendTrace(x, y, data.IndexOf(scatter));
    }
}

List<string> plotImages = new List<string> { };
private async Task SavePlot()
{
    string i = await chart.ToImage(ImageFormat.Png, 400, 800); **//This part hangs**
    plotImages.Add(i);
}

}