Change legend position?

[nhirschey]

Description

How do I change the legend position? For instance, to put the legend below the chart in this sample? I can't see this documented anywhere.

Repro steps

open Plotly.NET 
  
let x = [1.; 2.; 3.; 4.; 5.; 6.; 7.; 8.; 9.; 10.; ]
let y = [2.; 1.5; 5.; 1.5; 3.; 2.5; 2.5; 1.5; 3.5; 1.]

let combinedChart = 
    [
        Chart.Line(x,y,Name="first")
        Chart.Line(y,x,Name="second")
    ]
    |> Chart.Combine

// has legend to the right of the chart. I'd like it below the chart.
combinedChart.Show

[kMutagene]

Hi @nhirschey , while we have a legend object, that one is currently just a placeholder.

As a workaround for now you can do the following by setting some dynamic properties of the chart layout (see the respective plotly.js docs as a reference):

let myLegend = Legend()
myLegend?orientation <- "h" // this is the plotly.js property to set the legend orientation, the "h" stands for horizontal

[
    [(1,5);(2,10)]
    [(2,4);(3,9)]
    [(3,3);(4,8)]
    [(4,2);(5,7)]
    [(5,1);(6,6)]    
    [(6,-1);(7,5)]
    [(7,-2);(8,4)]
    [(8,-3);(9,3)]
    [(9,-4);(10,2)]
    [(10,-5);(11,1)]

]
|> List.map Chart.Line
|> Chart.Combine
|> GenericChart.mapLayout( fun l -> 
    l?legend <- myLegend
    l
)
|> Chart.Show

As this is a small set of properties it should not take too long to wrap this. Expect it to be available in a type-safe manner in the next package ;)

[nhirschey]

Thanks! I was bouncing around different parts of the source, but I couldn't figure this out. This code above and use of mapLayout makes sense.

[kMutagene]

No worries! If you want to upgrade right now, the new version (2.0.0-beta6, should be live soon) contains the DSL for handling the legend, so you can do this:

let myLegend = 
    Legend.init(
        Orientation = StyleParam.Orientation.Horizontal
    )

[
    [(1,5);(2,10)]
    [(2,4);(3,9)]
    [(3,3);(4,8)]
    [(4,2);(5,7)]
    [(5,1);(6,6)]    
    [(6,-1);(7,5)]
    [(7,-2);(8,4)]
    [(8,-3);(9,3)]
    [(9,-4);(10,2)]
    [(10,-5);(11,1)]

]
|> List.map Chart.Line
|> Chart.Combine
|> Chart.withLegend(myLegend)
|> Chart.Show

[nhirschey]

Fantastic, thank you!