Styling polar layouts

BinderScriptNotebook

Summary: This example shows how to style polar layouts in F#.

let's first create some data for the purpose of creating example charts:

open Plotly.NET

let r  = [ 1; 2; 3; 4; 5; 6; 7;] |> List.map ((*) 10000)
let r2 = [ 5; 6; 7; 1; 2; 3; 4;] |> List.map ((*) 10000)
let r3 = [ 3; 1; 5; 2; 8; 7; 5;] |> List.map ((*) 10000)

let t  = [0; 45; 90; 135; 200; 320; 184;]

Consider this combined polar chart:

let combinedPolar =
    [
        Chart.PointPolar(r,t,Name="PointPolar")
        Chart.LinePolar(r2,t,Name="LinePolar", ShowMarkers = true)
        Chart.SplinePolar(r3,t,Name="SplinePolar", ShowMarkers = true)
    ]
    
    |> Chart.combine

Styling the polar layout

Use the Chart.withPolar function and initialize a Polar layout with the desired looks

let styledPolar = 
    combinedPolar
    |> Chart.withPolar(
        Polar.init(
            Sector= (0., 270.),
            Hole=0.1
        )
    )

Styling radial and angular axes

You could pass these axes to Chart.withPolar, but for the case where you want to specifically set the angular or radial axis, there are the Chart.withAngularAxis and Chart.withRadialAxis functions:

let styledPolar2 =
    styledPolar
    |> Chart.withAngularAxis(
        Axis.AngularAxis.init(
            Color="darkblue"
        )
    )
    |> Chart.withRadialAxis(
        Axis.RadialAxis.init(
            Title = Title.init("Hi, i am the radial axis"),
            Color="darkblue",
            SeparateThousands = true
        )
    )
namespace Plotly
namespace Plotly.NET
val r : int list
Multiple items
module List from Microsoft.FSharp.Collections
<summary>Contains operations for working with values of type <see cref="T:Microsoft.FSharp.Collections.list`1" />.</summary>
<namespacedoc><summary>Operations for collections such as lists, arrays, sets, maps and sequences. See also <a href="https://docs.microsoft.com/dotnet/fsharp/language-reference/fsharp-collection-types">F# Collection Types</a> in the F# Language Guide. </summary></namespacedoc>


--------------------
type List<'T> = | ( [] ) | ( :: ) of Head: 'T * Tail: 'T list interface IReadOnlyList<'T> interface IReadOnlyCollection<'T> interface IEnumerable interface IEnumerable<'T> member GetReverseIndex : rank:int * offset:int -> int member GetSlice : startIndex:int option * endIndex:int option -> 'T list static member Cons : head:'T * tail:'T list -> 'T list member Head : 'T member IsEmpty : bool member Item : index:int -> 'T with get ...
<summary>The type of immutable singly-linked lists.</summary>
<remarks>Use the constructors <c>[]</c> and <c>::</c> (infix) to create values of this type, or the notation <c>[1;2;3]</c>. Use the values in the <c>List</c> module to manipulate values of this type, or pattern match against the values directly. </remarks>
<exclude />
val map : mapping:('T -> 'U) -> list:'T list -> 'U list
<summary>Builds a new collection whose elements are the results of applying the given function to each of the elements of the collection.</summary>
<param name="mapping">The function to transform elements from the input list.</param>
<param name="list">The input list.</param>
<returns>The list of transformed elements.</returns>
val r2 : int list
val r3 : int list
val t : int list
val combinedPolar : GenericChart.GenericChart
type Chart = static member Area : x:seq<#IConvertible> * y:seq<#IConvertible> * ?Name:string * ?ShowMarkers:bool * ?Showlegend:bool * ?MarkerSymbol:Symbol * ?Color:string * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Dash:DrawingStyle * ?Width:float -> GenericChart + 1 overload static member Bar : keys:seq<#IConvertible> * values:seq<#IConvertible> * ?Name:string * ?Showlegend:bool * ?Color:string * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Marker:Marker -> GenericChart + 1 overload static member BarPolar : r:seq<#IConvertible> * theta:seq<#IConvertible> * ?Name:string * ?Showlegend:bool * ?Color:string * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Dash:DrawingStyle * ?LineWidth:float -> GenericChart static member BoxPlot : ?x:'a0 * ?y:'a1 * ?Name:string * ?Showlegend:bool * ?Color:string * ?Fillcolor:'a2 * ?Opacity:float * ?Whiskerwidth:'a3 * ?Boxpoints:Boxpoints * ?Boxmean:BoxMean * ?Jitter:'a4 * ?Pointpos:'a5 * ?Orientation:Orientation * ?Marker:Marker * ?Line:Line * ?Alignmentgroup:'a6 * ?Offsetgroup:'a7 * ?Notched:bool * ?NotchWidth:float * ?QuartileMethod:QuartileMethod -> GenericChart + 1 overload static member Bubble : x:seq<#IConvertible> * y:seq<#IConvertible> * sizes:seq<#IConvertible> * ?Name:string * ?Showlegend:bool * ?MarkerSymbol:Symbol * ?Color:string * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?StackGroup:string * ?Orientation:Orientation * ?GroupNorm:GroupNorm * ?UseWebGL:bool -> GenericChart + 1 overload static member Bubble3d : x:seq<#IConvertible> * y:seq<#IConvertible> * z:seq<#IConvertible> * sizes:seq<#IConvertible> * ?Name:string * ?Showlegend:bool * ?MarkerSymbol:Symbol * ?Color:string * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font -> GenericChart + 1 overload static member BubblePolar : r:seq<#IConvertible> * theta:seq<#IConvertible> * sizes:seq<#IConvertible> * ?Name:string * ?Showlegend:bool * ?MarkerSymbol:Symbol * ?Color:string * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?UseWebGL:bool -> GenericChart + 1 overload static member Candlestick : open:seq<#IConvertible> * high:seq<#IConvertible> * low:seq<#IConvertible> * close:seq<#IConvertible> * x:seq<#IConvertible> * ?Increasing:Line * ?Decreasing:Line * ?WhiskerWidth:float * ?Line:Line * ?XCalendar:Calendar -> GenericChart + 1 overload static member ChoroplethMap : locations:seq<string> * z:seq<#IConvertible> * ?Text:seq<#IConvertible> * ?Locationmode:LocationFormat * ?Autocolorscale:bool * ?Colorscale:Colorscale * ?ColorBar:ColorBar * ?Marker:Marker * ?GeoJson:'a2 * ?FeatureIdKey:string * ?Zmin:float * ?Zmax:float -> GenericChart static member ChoroplethMapbox : locations:seq<#IConvertible> * z:seq<#IConvertible> * geoJson:'a2 * ?FeatureIdKey:string * ?Text:seq<#IConvertible> * ?Below:string * ?Colorscale:Colorscale * ?ColorBar:ColorBar * ?ZAuto:bool * ?ZMin:float * ?ZMid:float * ?ZMax:float -> GenericChart ...
<summary> Provides a set of static methods for creating charts. </summary>
static member Chart.PointPolar : rTheta:seq<#System.IConvertible * #System.IConvertible> * ?Name:string * ?Showlegend:bool * ?MarkerSymbol:StyleParam.Symbol * ?Color:string * ?Opacity:float * ?Labels:seq<#System.IConvertible> * ?TextPosition:StyleParam.TextPosition * ?TextFont:Font * ?UseWebGL:bool -> GenericChart.GenericChart
static member Chart.PointPolar : r:seq<#System.IConvertible> * theta:seq<#System.IConvertible> * ?Name:string * ?Showlegend:bool * ?MarkerSymbol:StyleParam.Symbol * ?Color:string * ?Opacity:float * ?Labels:seq<#System.IConvertible> * ?TextPosition:StyleParam.TextPosition * ?TextFont:Font * ?UseWebGL:bool -> GenericChart.GenericChart
static member Chart.LinePolar : rTheta:seq<#System.IConvertible * #System.IConvertible> * ?Name:string * ?Showlegend:bool * ?ShowMarkers:bool * ?MarkerSymbol:StyleParam.Symbol * ?Color:string * ?Opacity:float * ?Labels:seq<#System.IConvertible> * ?TextPosition:StyleParam.TextPosition * ?TextFont:Font * ?Dash:StyleParam.DrawingStyle * ?Width:float * ?UseWebGL:bool -> GenericChart.GenericChart
static member Chart.LinePolar : r:seq<#System.IConvertible> * theta:seq<#System.IConvertible> * ?Name:string * ?Showlegend:bool * ?ShowMarkers:bool * ?MarkerSymbol:StyleParam.Symbol * ?Color:string * ?Opacity:float * ?Labels:seq<#System.IConvertible> * ?TextPosition:StyleParam.TextPosition * ?TextFont:Font * ?Dash:StyleParam.DrawingStyle * ?Width:float * ?UseWebGL:bool -> GenericChart.GenericChart
static member Chart.SplinePolar : rTheta:seq<#System.IConvertible * #System.IConvertible> * ?Name:string * ?Showlegend:bool * ?ShowMarkers:bool * ?MarkerSymbol:StyleParam.Symbol * ?Color:string * ?Opacity:float * ?Labels:seq<#System.IConvertible> * ?TextPosition:StyleParam.TextPosition * ?TextFont:Font * ?Smoothing:float * ?Dash:StyleParam.DrawingStyle * ?Width:float * ?UseWebGL:bool -> GenericChart.GenericChart
static member Chart.SplinePolar : r:seq<#System.IConvertible> * theta:seq<#System.IConvertible> * ?Name:string * ?Showlegend:bool * ?ShowMarkers:bool * ?MarkerSymbol:StyleParam.Symbol * ?Color:string * ?Opacity:float * ?Labels:seq<#System.IConvertible> * ?TextPosition:StyleParam.TextPosition * ?TextFont:Font * ?Smoothing:float * ?Dash:StyleParam.DrawingStyle * ?Width:float * ?UseWebGL:bool -> GenericChart.GenericChart
static member Chart.combine : gCharts:seq<GenericChart.GenericChart> -> GenericChart.GenericChart
module GenericChart from Plotly.NET
<summary> Module to represent a GenericChart </summary>
val toChartHTML : gChart:GenericChart.GenericChart -> string
<summary> Converts a GenericChart to it HTML representation. The div layer has a default size of 600 if not specified otherwise. </summary>
val styledPolar : GenericChart.GenericChart
static member Chart.withPolar : polar:Polar * ?Id:StyleParam.SubPlotId -> (GenericChart.GenericChart -> GenericChart.GenericChart)
Multiple items
type Polar = inherit DynamicObj new : unit -> Polar static member init : ?Domain:Domain * ?Sector:(float * float) * ?Hole:float * ?BGColor:string * ?RadialAxis:RadialAxis * ?AngularAxis:AngularAxis * ?GridShape:PolarGridShape * ?UIRevision:string -> Polar static member style : ?Domain:Domain * ?Sector:(float * float) * ?Hole:float * ?BGColor:string * ?RadialAxis:RadialAxis * ?AngularAxis:AngularAxis * ?GridShape:PolarGridShape * ?UIRevision:string * ?BarMode:Barmode * ?BarGap:float -> (Polar -> Polar)

--------------------
new : unit -> Polar
static member Polar.init : ?Domain:Domain * ?Sector:(float * float) * ?Hole:float * ?BGColor:string * ?RadialAxis:Axis.RadialAxis * ?AngularAxis:Axis.AngularAxis * ?GridShape:StyleParam.PolarGridShape * ?UIRevision:string -> Polar
val styledPolar2 : GenericChart.GenericChart
static member Chart.withAngularAxis : angularAxis:Axis.AngularAxis * ?Id:StyleParam.SubPlotId -> (GenericChart.GenericChart -> GenericChart.GenericChart)
module Axis from Plotly.NET
<summary>Various axes that can be used to add scales to your plots.</summary>
Multiple items
type AngularAxis = inherit DynamicObj new : unit -> AngularAxis static member init : ?Visible:bool * ?AxisType:AxisType * ?AutoTypeNumbers:AutoTypeNumbers * ?CategoryOrder:CategoryOrder * ?CategoryArray:seq<#IConvertible> * ?ThetaUnit:AngularUnit * ?Period:float * ?Direction:Direction * ?Rotation:int * ?HoverFormat:string * ?UIRevision:#IConvertible * ?Color:string * ?ShowLine:bool * ?LineColor:string * ?LineWidth:int * ?ShowGrid:bool * ?GridColor:string * ?GridWidth:int * ?TickMode:TickMode * ?NTicks:int * ?Tick0:#IConvertible * ?DTick:#IConvertible * ?TickVals:seq<#IConvertible> * ?TickText:seq<#IConvertible> * ?Ticks:TickOptions * ?TickLen:int * ?TickWidth:int * ?TickColor:string * ?ShowTickLabels:bool * ?ShowTickPrefix:ShowTickOption * ?TickPrefix:string * ?ShowTickSuffix:ShowTickOption * ?TickSuffix:string * ?ShowExponent:ShowExponent * ?ExponentFormat:ExponentFormat * ?MinExponent:float * ?SeparateThousands:bool * ?TickFont:Font * ?TickAngle:int * ?TickFormat:string * ?TickFormatStops:seq<TickFormatStop> * ?Layer:Layer -> AngularAxis static member style : ?Visible:bool * ?AxisType:AxisType * ?AutoTypeNumbers:AutoTypeNumbers * ?CategoryOrder:CategoryOrder * ?CategoryArray:seq<#IConvertible> * ?ThetaUnit:AngularUnit * ?Period:float * ?Direction:Direction * ?Rotation:int * ?HoverFormat:string * ?UIRevision:#IConvertible * ?Color:string * ?ShowLine:bool * ?LineColor:string * ?LineWidth:int * ?ShowGrid:bool * ?GridColor:string * ?GridWidth:int * ?TickMode:TickMode * ?NTicks:int * ?Tick0:#IConvertible * ?DTick:#IConvertible * ?TickVals:seq<#IConvertible> * ?TickText:seq<#IConvertible> * ?Ticks:TickOptions * ?TickLen:int * ?TickWidth:int * ?TickColor:string * ?ShowTickLabels:bool * ?ShowTickPrefix:ShowTickOption * ?TickPrefix:string * ?ShowTickSuffix:ShowTickOption * ?TickSuffix:string * ?ShowExponent:ShowExponent * ?ExponentFormat:ExponentFormat * ?MinExponent:float * ?SeparateThousands:bool * ?TickFont:Font * ?TickAngle:int * ?TickFormat:string * ?TickFormatStops:seq<TickFormatStop> * ?Layer:Layer -> (AngularAxis -> AngularAxis)
<summary>Angular axes can be used as a scale for the angular coordinates in polar plots.</summary>

--------------------
new : unit -> Axis.AngularAxis
static member Axis.AngularAxis.init : ?Visible:bool * ?AxisType:StyleParam.AxisType * ?AutoTypeNumbers:StyleParam.AutoTypeNumbers * ?CategoryOrder:StyleParam.CategoryOrder * ?CategoryArray:seq<#System.IConvertible> * ?ThetaUnit:StyleParam.AngularUnit * ?Period:float * ?Direction:StyleParam.Direction * ?Rotation:int * ?HoverFormat:string * ?UIRevision:#System.IConvertible * ?Color:string * ?ShowLine:bool * ?LineColor:string * ?LineWidth:int * ?ShowGrid:bool * ?GridColor:string * ?GridWidth:int * ?TickMode:StyleParam.TickMode * ?NTicks:int * ?Tick0:#System.IConvertible * ?DTick:#System.IConvertible * ?TickVals:seq<#System.IConvertible> * ?TickText:seq<#System.IConvertible> * ?Ticks:StyleParam.TickOptions * ?TickLen:int * ?TickWidth:int * ?TickColor:string * ?ShowTickLabels:bool * ?ShowTickPrefix:StyleParam.ShowTickOption * ?TickPrefix:string * ?ShowTickSuffix:StyleParam.ShowTickOption * ?TickSuffix:string * ?ShowExponent:StyleParam.ShowExponent * ?ExponentFormat:StyleParam.ExponentFormat * ?MinExponent:float * ?SeparateThousands:bool * ?TickFont:Font * ?TickAngle:int * ?TickFormat:string * ?TickFormatStops:seq<TickFormatStop> * ?Layer:StyleParam.Layer -> Axis.AngularAxis
static member Chart.withRadialAxis : radialAxis:Axis.RadialAxis * ?Id:StyleParam.SubPlotId -> (GenericChart.GenericChart -> GenericChart.GenericChart)
Multiple items
type RadialAxis = inherit DynamicObj new : unit -> RadialAxis static member init : ?Visible:bool * ?AxisType:AxisType * ?AutoTypeNumbers:AutoTypeNumbers * ?AutoRange:AutoRange * ?RangeMode:RangeMode * ?Range:Range * ?CategoryOrder:CategoryOrder * ?CategoryArray:seq<#IConvertible> * ?Angle:float * ?Side:Direction * ?Title:Title * ?HoverFormat:string * ?UIRevision:#IConvertible * ?Color:string * ?ShowLine:bool * ?LineColor:string * ?LineWidth:int * ?ShowGrid:bool * ?GridColor:string * ?GridWidth:int * ?TickMode:TickMode * ?NTicks:int * ?Tick0:#IConvertible * ?DTick:#IConvertible * ?TickVals:seq<#IConvertible> * ?TickText:seq<#IConvertible> * ?Ticks:TickOptions * ?TickLen:int * ?TickWidth:int * ?TickColor:string * ?ShowTickLabels:bool * ?ShowTickPrefix:ShowTickOption * ?TickPrefix:string * ?ShowTickSuffix:ShowTickOption * ?TickSuffix:string * ?ShowExponent:ShowExponent * ?ExponentFormat:ExponentFormat * ?MinExponent:float * ?SeparateThousands:bool * ?TickFont:Font * ?TickAngle:int * ?TickFormat:string * ?TickFormatStops:seq<TickFormatStop> * ?Layer:Layer * ?Calendar:Calendar -> RadialAxis static member style : ?Visible:bool * ?AxisType:AxisType * ?AutoTypeNumbers:AutoTypeNumbers * ?AutoRange:AutoRange * ?RangeMode:RangeMode * ?Range:Range * ?CategoryOrder:CategoryOrder * ?CategoryArray:seq<#IConvertible> * ?Angle:float * ?Side:Direction * ?Title:Title * ?HoverFormat:string * ?UIRevision:#IConvertible * ?Color:string * ?ShowLine:bool * ?LineColor:string * ?LineWidth:int * ?ShowGrid:bool * ?GridColor:string * ?GridWidth:int * ?TickMode:TickMode * ?NTicks:int * ?Tick0:#IConvertible * ?DTick:#IConvertible * ?TickVals:seq<#IConvertible> * ?TickText:seq<#IConvertible> * ?Ticks:TickOptions * ?TickLen:int * ?TickWidth:int * ?TickColor:string * ?ShowTickLabels:bool * ?ShowTickPrefix:ShowTickOption * ?TickPrefix:string * ?ShowTickSuffix:ShowTickOption * ?TickSuffix:string * ?ShowExponent:ShowExponent * ?ExponentFormat:ExponentFormat * ?MinExponent:float * ?SeparateThousands:bool * ?TickFont:Font * ?TickAngle:int * ?TickFormat:string * ?TickFormatStops:seq<TickFormatStop> * ?Layer:Layer * ?Calendar:Calendar -> (RadialAxis -> RadialAxis)
<summary>Radial axes can be used as a scale for the radial coordinates in polar plots.</summary>

--------------------
new : unit -> Axis.RadialAxis
static member Axis.RadialAxis.init : ?Visible:bool * ?AxisType:StyleParam.AxisType * ?AutoTypeNumbers:StyleParam.AutoTypeNumbers * ?AutoRange:StyleParam.AutoRange * ?RangeMode:StyleParam.RangeMode * ?Range:StyleParam.Range * ?CategoryOrder:StyleParam.CategoryOrder * ?CategoryArray:seq<#System.IConvertible> * ?Angle:float * ?Side:StyleParam.Direction * ?Title:Title * ?HoverFormat:string * ?UIRevision:#System.IConvertible * ?Color:string * ?ShowLine:bool * ?LineColor:string * ?LineWidth:int * ?ShowGrid:bool * ?GridColor:string * ?GridWidth:int * ?TickMode:StyleParam.TickMode * ?NTicks:int * ?Tick0:#System.IConvertible * ?DTick:#System.IConvertible * ?TickVals:seq<#System.IConvertible> * ?TickText:seq<#System.IConvertible> * ?Ticks:StyleParam.TickOptions * ?TickLen:int * ?TickWidth:int * ?TickColor:string * ?ShowTickLabels:bool * ?ShowTickPrefix:StyleParam.ShowTickOption * ?TickPrefix:string * ?ShowTickSuffix:StyleParam.ShowTickOption * ?TickSuffix:string * ?ShowExponent:StyleParam.ShowExponent * ?ExponentFormat:StyleParam.ExponentFormat * ?MinExponent:float * ?SeparateThousands:bool * ?TickFont:Font * ?TickAngle:int * ?TickFormat:string * ?TickFormatStops:seq<TickFormatStop> * ?Layer:StyleParam.Layer * ?Calendar:StyleParam.Calendar -> Axis.RadialAxis
Multiple items
type Title = inherit DynamicObj new : unit -> Title static member init : ?Text:string * ?Font:Font * ?Standoff:int * ?Side:Side -> Title static member style : ?Text:string * ?Font:Font * ?Standoff:int * ?Side:Side -> (Title -> Title)

--------------------
new : unit -> Title
static member Title.init : ?Text:string * ?Font:Font * ?Standoff:int * ?Side:StyleParam.Side -> Title