Using "colspan" with Chart.Grid

[nbevans]

Is there a way to set the colspan so that a particular subplot in a grid layout can span, say, 2 columns of the grid?

[kMutagene]

Hey @nbevans i am afraid that there is no way to do this out of the box with the grid system of plotly.js that is used by Chart.Grid. However, there is always the possibility of trading the comfort of a high level abstraction such as Chart.Grid for full control using advanced (and less safe) APIs. In this case, you could go for setting the domains of your subplots as fractions of the whole layout instead of using the grid system.

In the case of 2D cartesian traces, that means:

• create a custom axis system, where the axis domain is set as fraction of the available layout space
• anchor each axis to its partner
• anchor each plot to it's respective axis system (Chart.withAxisAnchor)
• set the axis on the chart's layout with their respective ids

here is a small example with 3 charts that already takes a lot of code, but gets the job done. You have full control here, but leave the comfort of a high level abstraction:

open Plotly.NET
open Plotly.NET.LayoutObjects

[

    Chart.Line([1,3; 2,4])
    |> Chart.withAxisAnchor(Y = 1)
    |> Chart.withAxisAnchor(X = 1)

    Chart.Line([1,3; 2,2])
    |> Chart.withAxisAnchor(Y = 2)
    |> Chart.withAxisAnchor(X = 2)

    Chart.Line([1,2; 2,2])
    |> Chart.withAxisAnchor(Y = 3)
    |> Chart.withAxisAnchor(X = 3)
    
]
|> Chart.combine
|> Chart.withYAxis(
    LinearAxis.init(
        Title = Title.init("y axis 1"), 
        Domain = StyleParam.Range.MinMax (0.55, 1.0),
        Anchor = StyleParam.LinearAxisId.X 1
    ), 
    Id =  StyleParam.SubPlotId.YAxis 1
)
|> Chart.withXAxis(
    LinearAxis.init(
        Title = Title.init("x axis 1"), 
        Domain = StyleParam.Range.MinMax (0.0, 0.45),
        Anchor = StyleParam.LinearAxisId.Y 1
    ), 
    Id =  StyleParam.SubPlotId.XAxis 1
)
|> Chart.withYAxis(
    LinearAxis.init(
        Title = Title.init("y axis 2"), 
        Domain = StyleParam.Range.MinMax (0.55, 1.0),
        Anchor = StyleParam.LinearAxisId.X 2
    ), 
    Id =  StyleParam.SubPlotId.YAxis 2
)
|> Chart.withXAxis(
    LinearAxis.init(
        Title = Title.init("x axis 2"), 
        Domain = StyleParam.Range.MinMax (0.55, 1.0),
        Anchor = StyleParam.LinearAxisId.Y 2
    ), 
    Id =  StyleParam.SubPlotId.XAxis 2
)
|> Chart.withYAxis(
    LinearAxis.init(
        Title = Title.init("y axis 3"), 
        Domain = StyleParam.Range.MinMax (0.0, 0.45),
        Anchor = StyleParam.LinearAxisId.X 3
    ), 
    Id =  StyleParam.SubPlotId.YAxis 3
)
|> Chart.withXAxis(
    LinearAxis.init(
        Title = Title.init("x axis 3"), 
        Domain = StyleParam.Range.MinMax (0.0, 1.0),
        Anchor = StyleParam.LinearAxisId.Y 3
    ), 
    Id =  StyleParam.SubPlotId.XAxis 3
)
|> Chart.withSize(1000,1000)