# Multiple Axes in F#

How to make a graph with multiple axes (dual y-axis plots, plots with secondary axes) in F#.

In [1]:
#r "nuget: Plotly.NET,  2.0.0-preview.8"
#r "nuget: Plotly.NET.Interactive,  2.0.0-preview.8"
Installed Packages
• Plotly.NET, 2.0.0-preview.8
• Plotly.NET.Interactive, 2.0.0-preview.8

Added Kernel Extension including formatters for Plotly.NET charts.

# Two Y Axes¶

Multiple Axes are created by defining AxisAnchor for the plot as shown below

In [2]:
open Plotly.NET
open Plotly.NET.TraceObjects
open Plotly.NET.LayoutObjects

let x = [for i in 0..10 -> i]
let y1 = [for i in x -> Math.Pow(float i,2.0)]
let y2 = [for i in x -> Math.Pow(float i,3.0)]

[
Chart.Line(x,y1,Name="anchor 1",ShowMarkers=true) |> Chart.withAxisAnchor(Y=1);
Chart.Line(x,y2,Name="anchor 2",ShowMarkers=true) |> Chart.withAxisAnchor(Y=2)
]
|> Chart.combine
|> Chart.withLayout(Layout.init(PlotBGColor=Color.fromString "#e5ecf6"))
|> Chart.withYAxisStyle(
"axis 1",
Side=StyleParam.Side.Left,
Id=StyleParam.SubPlotId.YAxis 1
)
|> Chart.withYAxisStyle(
"axis2",
Side=StyleParam.Side.Right,
Id=StyleParam.SubPlotId.YAxis 2,
Overlaying=StyleParam.LinearAxisId.Y 1
)
Out[2]:

# Multiple Axes¶

In [3]:
open Plotly.NET

[
for i in 1..4 ->
Chart.Line(x=[for j in i..(i+4) -> j],y=[for j in i..(i+4) -> 2*j*j+3*j],Name=String.Format("anchor {0}",i),ShowMarkers=true )
|> Chart.withAxisAnchor(Y=i)
]
|> Chart.combine
|> Chart.withXAxisStyle("x-axis",Domain=(0.3, 0.7))
|> Chart.withLayout(Layout.init(PlotBGColor=Color.fromString "#e5ecf6"))
|> Chart.withYAxisStyle(
"y axis 1",
Side=StyleParam.Side.Left,
Id=StyleParam.SubPlotId.YAxis 1
)
|> Chart.withYAxisStyle(
"y axis 2",
Side=StyleParam.Side.Left,
Id=StyleParam.SubPlotId.YAxis 2,
Position= 0.1,
Overlaying=StyleParam.LinearAxisId.Y 1
)
|> Chart.withYAxisStyle(
"y axis 3",
Side=StyleParam.Side.Right,
Id=StyleParam.SubPlotId.YAxis 3,
Overlaying=StyleParam.LinearAxisId.Y 1
)
|> Chart.withYAxisStyle(
"y axis 4",
Side=StyleParam.Side.Right,
Id=StyleParam.SubPlotId.YAxis 4,
Position= 0.85,
Overlaying=StyleParam.LinearAxisId.Y 1
)
Out[3]:

# Multiple Y-Axes Subplots¶

In [4]:
// open Plotly.NET

// let x = [for i in 0..10 -> i]
// let y = [for i in x -> Math.Pow(float i,2.0)]
// let y2 = [for i in x -> Math.Pow(float i,3.0)]

// [
//     [
//         Chart.Point(x,y,Name="1,1") |> Chart.withAxisAnchor(Y=1)
//         Chart.Point(x,y2,Name="1,2") |> Chart.withAxisAnchor(Y=2)
//     ]|>
//     Chart.combine
//     |> Chart.withYAxisStyle("y1",Side=StyleParam.Side.Left,Id=StyleParam.SubPlotId.YAxis 1)
//     |> Chart.withYAxisStyle("y2", Side=StyleParam.Side.Right,Id=StyleParam.SubPlotId.YAxis 2)

//     Chart.Invisible()

// ]
// |> Chart.Grid(2,2)

// let getChart i =
//     [
//         Chart.Line(x,y1,Name="anchor "+string i,ShowMarkers=true) |> Chart.withAxisAnchor(Y=i);
//         Chart.Line(x,y2,Name="anchor "+string (i+1),ShowMarkers=true) |> Chart.withAxisAnchor(Y=i+1)
//     ]
//     |> Chart.combine
//     |> Chart.withLayout(Layout.init(Plot_bgcolor="#e5ecf6"))
//     |> Chart.withYAxisStyle(
//             "axis 1",
//             Side=StyleParam.Side.Left,
//             Id=StyleParam.SubPlotId.YAxis i
//         )
//     |> Chart.withYAxisStyle(
//             "axis 2",
//             Side=StyleParam.Side.Right,
//             Id=StyleParam.SubPlotId.YAxis (i+1),
//             Overlaying=StyleParam.LinearAxisId.Y 1
//         )

// let grid =
//     [
//         for i in 1..1 -> (getChart i)
//     ]
//     |> Chart.Grid(2,2)

// grid