Use Plotly.Net in WPF Apllication

[dara1400]

Can the Plotly.NET charts be used as a UIElements in WPF Applications in c#?

[MosGeo]

An obvious way to use it in WPF is to generate html output using plotly.net and use a web view controller to display it.

[kMutagene]

An obvious way to use it in WPF is to generate html output using plotly.net and use a web view controller to display it.

Exactly (see also the faq section on the readme).

However iirc the functions from the core API to create the html representation of a chart are not ported as extension methods to Plotly.NET.CSharp yet, so you have to use the core API for that either via Plotly.NET.GenericChart.toChartHTML for transforming just the chart json and rendering logic (you will need to take care of referencing plotly.js in your html if you use this) or a full page via Plotly.NET.GenericChart.toEmbeddedHTML:

using Plotly.NET.CSharp;

var c = 
    Chart.Point<int,int,string>(
        x: new int[] { 1, 2, 3, 4 },
        y: new int[] { 10, 15, 13, 17 }
    );

Plotly.NET.GenericChart.toChartHTML(c)
Plotly.NET.GenericChart.toEmbeddedHTML(c)

[dara1400]

Thanks for your help.
I successfully use that in WebView2.
But I noticed that the package use some online libraries to plot the chart and it dose not work in offline mode.
Is there solution for this?

[kMutagene]

Yes, you can either host plotly.js with your app, or include the full source in the embedded html (see docs here: https://plotly.net/00_2_display-options.html#Referencing-PlotlyJS)

In C#, the latter would look like this:

using Plotly.NET.CSharp;

var c = 
    Chart.Point<int,int,string>(
        x: new int[] { 1, 2, 3, 4 },
        y: new int[] { 10, 15, 13, 17 }
    );

var c_full =
    Plotly.NET.Chart.WithDisplayOptionsStyle(PlotlyJSReference: Plotly.NET.PlotlyJSReference.Full).Invoke(c);

Plotly.NET.GenericChart.toEmbeddedHTML(c)

[dara1400]

Thanks for your reply.

var x = Enumerable.Range(1, 63).Select(x => x * 0.1);
var y = x.Select(x => System.Math.Sin(x));

var c = Chart.Scatter<double, double, string>(
    x: x,
    y: y,
    mode: Plotly.NET.StyleParam.Mode.Markers
);

//var a = Plotly.NET.GenericChart.toChartHTML(c);
//var b = Plotly.NET.GenericChart.toEmbeddedHTML(c);

var c_full = Plotly.NET.Chart.WithDisplayOptionsStyle(PlotlyJSReference: Plotly.NET.PlotlyJSReference.Full).Invoke(c);

var b= Plotly.NET.GenericChart.toEmbeddedHTML(c);

await webView2.EnsureCoreWebView2Async();

webView2.CoreWebView2.NavigateToString(b);

When I ran your code, I got this exception:

System.ArgumentException
HResult=0x80070057
Message=Value does not fall within the expected range.
Source=
StackTrace:

[kMutagene]

That looks like a framework-specific error that i cannot help with

[suahelen]

For Completeness sake.
I have run into the same issue just a couple days back.

I was able to make it work by storing the plot to a .html file and then loading this to the wpf WebView2 from URI.

I know its not the cleanest option, but does the job.

// c#
var c_full = Plotly.NET.Chart.WithDisplayOptionsStyle(PlotlyJSReference: Plotly.NET.PlotlyJSReference.Full).Invoke(c);
var b= Plotly.NET.GenericChart.toEmbeddedHTML(c);
File.WriteAllText("tmp.html", b);

// .xaml:
    <Grid>
        <wv2:WebView2 x:Name="WebView" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Width="Auto"/>
    </Grid>

// .xaml.cs
plotView.WebView.EnsureCoreWebView2Async().ContinueWith(
_ =>
{
      WebView.Source = new Uri($"file://{absolutePath}");

      // This did work work the online charts but failed 
      // var encodedContent = System.Net.WebUtility.HtmlEncode(b);
      // plotView.WebView.CoreWebView2.NavigateToString(encodedContent);
}