Skip to content

Commit 0ff75a6

Browse files
committed
Add docs for Chart.Grid and Chart.SingleStack
1 parent d73145a commit 0ff75a6

File tree

1 file changed

+76
-19
lines changed

1 file changed

+76
-19
lines changed

docsrc/content/multiple-charts.fsx

Lines changed: 76 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,86 @@ Multiple charts and subcharts
1111
1212
How to create subplots in FSharp.Plotly. Find examples of combined, stacked, and plots with multiple axis.
1313
14+
*)
15+
16+
17+
(**
18+
## Chart subplot grids
19+
20+
### Chart.Grid
21+
22+
`Chart.Grid` takes a 2D input sequence of charts and creates a subplot grid with the dimensions outerlength x (max (innerLengths))
23+
24+
25+
1426
*)
1527
open FSharp.Plotly
1628

1729

30+
//simple 3x3 subplot grid
31+
let grid =
32+
Chart.Grid(
33+
[
34+
[Chart.Point([(0,1)]); Chart.Point([(0,1)]); Chart.Point([(0,1)]);]
35+
[Chart.Point([(0,1)]); Chart.Point([(0,1)]); Chart.Point([(0,1)]);]
36+
[Chart.Point([(0,1)]); Chart.Point([(0,1)]); Chart.Point([(0,1)]);]
37+
]
38+
)
39+
40+
(***do-not-eval***)
41+
grid |> Chart.Show
42+
43+
(*** include-value:grid ***)
44+
45+
46+
(**
47+
use `sharedAxis=true` to use one shared x axis per column and one shared y axis per row.
48+
(Try zooming in the single subplots below)
49+
*)
50+
51+
let grid2 =
52+
Chart.Grid(
53+
[
54+
[Chart.Point([(0,1)]); Chart.Point([(0,1)]); Chart.Point([(0,1)]);]
55+
[Chart.Point([(0,1)]); Chart.Point([(0,1)]); Chart.Point([(0,1)]);]
56+
[Chart.Point([(0,1)]); Chart.Point([(0,1)]); Chart.Point([(0,1)]);]
57+
],sharedAxes=true,rowOrder = StyleParam.LayoutGridRowOrder.BottomToTop
58+
)
59+
60+
(***do-not-eval***)
61+
grid2 |> Chart.Show
62+
63+
(*** include-value:grid2 ***)
64+
65+
66+
(**
67+
### Chart.SingleStack
68+
69+
The `Chart.SingleStack` function is a special version of Chart.Grid that creates only one column from a 1D input chart sequence.
70+
It uses a shared x axis per default. You can also use the Chart.withLayoutGridStyle to further style subplot grids:
71+
72+
*)
73+
74+
let singleStack =
75+
[
76+
Chart.Point([(0,1)]) |> Chart.withY_AxisStyle("This title must")
77+
Chart.Point([(0,1)])
78+
|> Chart.withY_AxisStyle("be set on the",Zeroline=false)
79+
Chart.Point([(0,1)])
80+
|> Chart.withY_AxisStyle("respective subplots",Zeroline=false)
81+
]
82+
|> Chart.SingleStack
83+
//move xAxis to bottom and increase spacing between plots by using the withLayoutGridStyle function
84+
|> Chart.withLayoutGridStyle(XSide=StyleParam.LayoutGridXSide.Bottom,YGap= 0.1)
85+
|> Chart.withTitle("Hi i am the new SingleStackChart")
86+
|> Chart.withX_AxisStyle("im the shared xAxis")
87+
88+
89+
(***do-not-eval***)
90+
singleStack |> Chart.Show
91+
92+
(*** include-value:singleStack ***)
93+
1894
(**
1995
Functional F# scripting style for Two Y-Axes
2096
*)
@@ -56,22 +132,3 @@ let twoYaxesSide =
56132
twoYaxesSide |> Chart.Show
57133

58134
(*** include-value:twoYaxesSide ***)
59-
60-
(**
61-
Functional F# scripting style simple subplot stacked 2 columns.
62-
Axis style (like: title) is taken from the single chart, but can also be styled by axis id.
63-
*)
64-
65-
let stack =
66-
[
67-
for i=1 to 8 do
68-
yield Chart.Scatter ([1; 2; 3; 4],[12; 9; 15; 12],StyleParam.Mode.Lines_Markers)
69-
|> Chart.withY_AxisStyle(sprintf "y-title %i" i)
70-
]
71-
|> Chart.Stack(Columns=2,Space=0.15)
72-
|> Chart.withX_AxisStyle(sprintf "x-title %i" 3,Id=3)
73-
74-
(***do-not-eval***)
75-
stack |> Chart.Show
76-
77-
(*** include-value:stack ***)

0 commit comments

Comments
 (0)