Plotly.Net.ImageExport ToBase64JPGString hangs in Blazor Server Application

[markus-renezeder]

Description

I try to create a chart and export it into a Base64 JPG string to display it as image on a page. If I run the .ToBase64JPGString (or any other ToBase64...), the export does not get finished.
Same behavior if I use .SaveJPG("chart.jpg").
.SaveHtml("chart.html") works as expected.

Run this in a console application, it works.

Repro steps

1. Create a new Blazor Server Side Application
2. Add class Index.razor.cs
3. Add the following code in Index.razor.cs:

string image = string.Empty;
protected override void OnParametersSet()
{

    List<DateTime> dateTimes = new();
    List<float> temp = new();
    List<float> utemp = new();
    List<float> ltemp = new();

    for (int i = 0; i < 10; i++)
    {
        dateTimes.Add(DateTime.Now.AddDays(i));
    }

    for (int i = 0; i < 10; i++)
    {
        float t = Random.Shared.Next(10, 30);

        float diff = Random.Shared.Next(1, 10);

        temp.Add(t);

        utemp.Add(t + diff);
        ltemp.Add(t - diff);
    }

    var range = Chart.Range<DateTime, float, string>(dateTimes, temp, utemp, ltemp, Name: "range", mode: Plotly.NET.StyleParam.Mode.Lines_Markers);

    image = range.ToBase64JPGString();
}

5. run the application

Expected behavior

Base64 image string

Actual behavior

.ToBase64JPGString hangs
.SaveJPG hangs

Related information

Windows 11
Plotly.Net 4.2.0
Plotly.Net.ImageExport 5.0.1
Plotly.Net.CSharp 0.11.1

.NET 6.0

[kMutagene]

Hey @markus-renezeder,

My suspicion would be your application not being able to download chromium, which is the default behavior when you do not set a path to a local chromium executable. Chromium is needed for static image export, but not for html export, which further supports this suspicion. See for example #295 on how to point your application to a local chromium executable.

[kMutagene]

Also note that if you just want to display your chart in your webpage, there is no need to convert it to an image. Here is an example on how to embed the chart directly into the page: https://github.com/kMutagene/Plotly.NET.BlazorSample/tree/main/PlotlyBlazorTest

[markus-renezeder]

Hi @kMutagene ,
thank you for your answer. I've got it running by setting the chromium executable. This works on my local dev machine.

But I'm wondering how to use this function if I host the Blazor application in a docker container or on a web server. In this case mabe I don't have a local chromium installation.

Is there a possibility to use the .SaveJPG method without the need of a local installed application (maybe a rendere which can be installed using nuget)?

The reason why I need to export it to an image is that I want to provide an API which creates the image. This image should be displayed in different documents like HML-Page, PDF ...

[kMutagene]

I think your best bet is shipping the needed binaries bundled with your application. For a docker container that could either involve a custom image that contains the binaries, or using a base image that has chromium pre-installed. If you just deploy the application itself, maybe bundling the necessary binaries into the publish output will work.

However, you will currently not get around needing chromium for this though. Plotly.NET creates chart objects that can be rendered by plotly.js - which needs a JS runtime to work. There are other ways we could do this, see e.g. #393 or #422 . I think playwright-dotnet is packaging the browser binaries in it's nuget package, so it seems to be possible doing it like that - but both these approaches are not implemented. The only reference implementation for static image export currently available in Plotly.NET.ImageExport uses PuppeteerSharp which either downloads the latest chromium or needs a local installation.