Charts no longer show in dotnet interactive C# jupyter notebooks

[Martin-Molinero]

Description

Charts no longer show in dotnet interactive C# jupyter notebooks, starting with versions >= 4

Repro steps

• Requires
  • Net 6
  • pip install jupyter
  • dotnet interactive

    dotnet tool install -g --no-cache --version 1.0.340501 --add-source "https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet-tools/nuget/v3/index.json" Microsoft.dotnet-interactive && dotnet interactive jupyter install

• Create dummy project

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>net6.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <Nullable>enable</Nullable>
  </PropertyGroup>

	<ItemGroup>
		<PackageReference Include="Plotly.NET" Version="3.0.1" />
		<PackageReference Include="Plotly.NET.Interactive" Version="3.0.2" />
	</ItemGroup>
</Project>

• Build project, cd into bin/net6 folder

# jupyter lab

• Try running the following notebook

#r "Plotly.NET.dll"
#r "Plotly.NET.Interactive.dll"

using System;
using System.Linq;
using System.Data;
using System.Collections.Generic;
using System.Runtime;
using System.Diagnostics;
using System.Threading.Tasks;
using Plotly.NET;
using Plotly.NET.Interactive;
using Plotly.NET.LayoutObjects;
using Microsoft.AspNetCore.Html;

var zDataTest = new List<List<decimal>> 
{ 
 new List<decimal> { 0, 1 }, 
 new List<decimal> { 2, 3 } 
};

var annotationText = new List<List<string>> 
{ 
 new List<string> { "a", "b" }, 
 new List<string> { "c", "d" } 
};

var XTest = new List<double> { 0, 1 };
var YTest = new List<double> { 0, 1 };

var test = Plotly.NET.Chart2D.Chart.AnnotatedHeatmap<IEnumerable<decimal>, decimal, IEnumerable<string>, double, double, string>( 
 zData: zDataTest,
 annotationText: annotationText,
 X: XTest,
 Y: YTest,
 ColorScale: StyleParam.Colorscale.Jet,
 ShowScale: true
);


var xAxis = new LinearAxis();
xAxis.SetValue("tickvals", XTest);
xAxis.SetValue("ticktext", new List<string> { "0.003", "0.006" });
xAxis.SetValue("tickformat", ".3%");

var yAxis = new LinearAxis();
yAxis.SetValue("tickvals", YTest);
yAxis.SetValue("ticktext", new List<string> { "0.003", "0.006" });

var layout = new Layout();
layout.SetValue("xaxis", xAxis);
layout.SetValue("yaxis", yAxis);

test.WithLayout(layout);
test

var content = GenericChart.toChartHTML(test);
var htmlContent = HTML(content);
display(htmlContent)

Using version 3 will chart

Using version 4 nothing will be charted

Expected behavior

Charts are rendered

Actual behavior

No chart is shown

Known workarounds

Use versions < 4.0.0

Related information

• Operating system: win/lin
• Branch: latest nuget release
• .NET Runtime, CoreCLR or Mono Version: Net 6
• Performance information, links to performance testing scripts: N/A

[kMutagene]

Why are you referencing Plotly.NET.Interactive, when you are not using the interactive extension at all? Plotly.NET.Interactive is designed so you just have to end cells with the chart itself, see here. Does this not work in jupyter lab, or have you any other restriction why you must use GenericChart.toChartHTML directly?

In a blank notebook using #r nuget reference syntax, everything works as intended:

However, there are several additional issues here.

1. I have never seen notebooks that reference .dlls directly, so it might be that you must also reference transitive dependencies of Plotly.NET if you do it like this.

2. There is also Plotly.NET.CSharp, which i'd recommend using in C#, at least for the top-level chart constructors

3. Plotly.NET 4.0.0 introduced a new rendering mechanism. If you insist on using GenericChart.toChartHTML, you have to make sure that you reference plotly.js via require.js in the generated html (which is exactly what Plotly.NET.Interactive is doing as well):
   

   Plotly.NET/src/Plotly.NET.Interactive/Formatters.fs

   Lines 9 to 14 in bbdcfaa

   	let toInteractiveHTML gChart =
   	gChart
   	|> Chart.withDisplayOptionsStyle (
   	PlotlyJSReference = Require $"https://cdn.plot.ly/plotly-{Globals.PLOTLYJS_VERSION}.min"
   	)
   	|> GenericChart.toChartHTML

   So if you cannot use the extension as intended, you could try using Plotly.NET.Interactive.Formatters.toInteractiveHTML.

[kMutagene]

@Martin-Molinero did any of the suggestions work for you?

[Martin-Molinero]

Hey @kMutagene! Thank you for looking into this, I haven't had time to check it out again, but I will. I'll close the issue for now and come back with feedback if any. Thanks!

[Martin-Molinero]

Hey @kMutagene!
Yes, the difference is in the reference, not sure why though
using the following doesn't work

#r "Plotly.NET.dll"
#r "Plotly.NET.CSharp.dll"
#r "Plotly.NET.Interactive.dll"

This works

#r "nuget: Plotly.NET"
#r "nuget: Plotly.NET.CSharp"
#r "nuget: Plotly.NET.Interactive"