Issue with F# Plotly.NET chart descriptions

Question

I'm trying to plot a line chart with a description, using the first method identified in https://plotly.net/00_2_display-options.html.

While the code runs, and the chart is correctly plotted, I can't see the description.

Here's the code block:

let description1 =
    ChartDescription.create "Cumulative Growth of Market and HmL Factors" ""

Chart.combine(
    [Chart.Line(
        hmlGrowth,
        Name="Hml")
     Chart.Line(
         marketGrowth,
         Name="Mkt")
    |> Chart.withDescription(description1)
    |> Chart.withYAxisStyle (AxisType = StyleParam.AxisType.Log)
    |> Chart.withXAxisStyle("Date")
    ]
)

If I add |> Chart.show I get a compilation error, perhaps because I'm using a Notebook.

Any help is greatly appreciated.

EDIT: managed to get in touch with the authors, should be sorted. https://github.com/plotly/Plotly.NET/issues/281

Answer 1

This works if you run code in F# Interactive and display it using Chart.show, but it does not work in .NET Interactive. When using Chart.show, the description is added below the chart as ordinary HTML block, so I suspect the formatter for .NET Interactive just somhow ignores this part. I think this is a bug and it would be good to report & fix this.

As a workaround, it seems that you can post-process the HTML generated for charts and add whatever additional code you need by getting the HTML and then returning it using the HTML helper. For example:

let showWithHeading s c = 
    HTML("<h3>" + s + "</h3>" + Plotly.NET.GenericChart.toChartHTML(c))

Chart.combine(
    [Chart.Line(
        hmlGrowth,
        Name="Hml")
     Chart.Line(
         marketGrowth,
         Name="Mkt")
    |> Chart.withYAxisStyle (AxisType = StyleParam.AxisType.Log)
    |> Chart.withXAxisStyle("Date")
    ]
)
|> showWithHeading "Cumulative Growth of Market and HmL Factors"

Answer 2

I second Tomas's point that it looks like a bug with Plotly.NET's current notebook formatter.

One option is to use Chart.withTitle

#r "nuget:Plotly.NET, 2.0.0-preview.18"
#r "nuget:Plotly.NET.Interactive, 2.0.0-preview.18"

open System
open Plotly.NET

let hmlGrowth = [
    DateTime(2005, 1,1), 1.0
    DateTime(2006,1,1), 2.0 ]

let marketGrowth = hmlGrowth |> List.map (fun (a,b) -> a, b + 1.0)

Chart.combine([
    Chart.Line(
        hmlGrowth,
        Name="Hml")
    Chart.Line(
        marketGrowth,
        Name="Mkt")
    ])
|> Chart.withYAxisStyle (AxisType = StyleParam.AxisType.Log)
|> Chart.withXAxisStyle ("Date")
|> Chart.withTitle("Cumulative Growth of Market and HmL Factors")

Answer 3

Managed to get in touch with the authors, should be sorted: https://github.com/plotly/Plotly.NET/issues/281