Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Using "colspan" with Chart.Grid #462

Unanswered
nbevans asked this question in Q&A
Discussion options

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?

You must be logged in to vote

Replies: 1 comment

Comment options

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)

image

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
Converted from issue

This discussion was converted from issue #461 on June 25, 2024 06:38.

AltStyle によって変換されたページ (->オリジナル) /