Using "colspan" with Chart.Grid #461

Activity

1. kMutagene commented on Jun 25, 2024

   

   kMutagene

   on Jun 25, 2024

   Collaborator

   More actions

   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)

   
2. plotly

   locked and limited conversation to collaborators on Jun 25, 2024
3. kMutagene

   converted this issue into a discussion #462 on Jun 25, 2024