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

open Plotly.NET.LayoutObjects

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(
        AngularAxis.init(
            Color=Color.fromString "darkblue"
        )
    )
    |> Chart.withRadialAxis(
        RadialAxis.init(
            Title = Title.init("Hi, i am the radial axis"),
            Color=Color.fromString "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:MarkerSymbol * ?Color:Color * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Dash:DrawingStyle * ?Width:float -> GenericChart + 1 overload static member Bar : values:seq<#IConvertible> * ?Keys:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Color:Color * ?PatternShape:PatternShape * ?MultiPatternShape:seq<PatternShape> * ?Pattern:Pattern * ?Base:#IConvertible * ?Width:'a3 * ?MultiWidth:seq<'a3> * ?Opacity:float * ?MultiOpacity:seq<float> * ?Text:'a4 * ?MultiText:seq<'a4> * ?TextPosition:TextPosition * ?MultiTextPosition:seq<TextPosition> * ?TextFont:Font * ?Marker:Marker -> GenericChart (requires 'a3 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member BoxPlot : ?x:'a0 * ?y:'a1 * ?Name:string * ?ShowLegend:bool * ?Color:Color * ?Fillcolor:Color * ?Opacity:float * ?Whiskerwidth:'a2 * ?Boxpoints:Boxpoints * ?Boxmean:BoxMean * ?Jitter:'a3 * ?Pointpos:'a4 * ?Orientation:Orientation * ?Marker:Marker * ?Line:Line * ?Alignmentgroup:'a5 * ?Offsetgroup:'a6 * ?Notched:bool * ?NotchWidth:float * ?QuartileMethod:QuartileMethod -> GenericChart + 1 overload static member Bubble : x:seq<#IConvertible> * y:seq<#IConvertible> * sizes:seq<int> * ?Name:string * ?ShowLegend:bool * ?MarkerSymbol:MarkerSymbol * ?Color:Color * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?StackGroup:string * ?Orientation:Orientation * ?GroupNorm:GroupNorm * ?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 Column : values:seq<#IConvertible> * ?Keys:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Color:Color * ?Pattern:Pattern * ?PatternShape:PatternShape * ?MultiPatternShape:seq<PatternShape> * ?Base:#IConvertible * ?Width:'a3 * ?MultiWidth:seq<'a3> * ?Opacity:float * ?MultiOpacity:seq<float> * ?Text:'a4 * ?MultiText:seq<'a4> * ?TextPosition:TextPosition * ?MultiTextPosition:seq<TextPosition> * ?TextFont:Font * ?Marker:Marker -> GenericChart (requires 'a3 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member Contour : data:seq<#seq<'a1>> * ?X:seq<#IConvertible> * ?Y:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Colorscale:Colorscale * ?Showscale:'a4 * ?zSmooth:SmoothAlg * ?ColorBar:'a5 -> GenericChart (requires 'a1 :> IConvertible) static member Funnel : x:seq<#IConvertible> * y:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Color:Color * ?Line:Line * ?x0:'a3 * ?dX:float * ?y0:'a4 * ?dY:float * ?Width:float * ?Offset:float * ?Orientation:Orientation * ?Alignmentgroup:string * ?Offsetgroup:string * ?Cliponaxis:bool * ?Connector:FunnelConnector * ?Insidetextfont:Font * ?Outsidetextfont:Font -> GenericChart static member Heatmap : data:seq<#seq<'a1>> * ?ColNames:seq<#IConvertible> * ?RowNames:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Colorscale:Colorscale * ?Showscale:'a4 * ?Xgap:'a5 * ?Ygap:'a6 * ?zSmooth:SmoothAlg * ?ColorBar:'a7 * ?UseWebGL:bool -> GenericChart (requires 'a1 :> IConvertible) static member Histogram : data:seq<#IConvertible> * ?Orientation:Orientation * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Color:Color * ?HistNorm:HistNorm * ?HistFunc:HistFunc * ?nBinsx:int * ?nBinsy:int * ?Xbins:Bins * ?Ybins:Bins * ?xError:'a1 * ?yError:'a2 -> GenericChart ...
static member Chart.PointPolar : rTheta:seq<#System.IConvertible * #System.IConvertible> * ?Name:string * ?ShowLegend:bool * ?MarkerSymbol:StyleParam.MarkerSymbol * ?Color:Color * ?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.MarkerSymbol * ?Color:Color * ?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.MarkerSymbol * ?Color:Color * ?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.MarkerSymbol * ?Color:Color * ?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.MarkerSymbol * ?Color:Color * ?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.MarkerSymbol * ?Color:Color * ?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>
namespace Plotly.NET.LayoutObjects
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:Color * ?RadialAxis:RadialAxis * ?AngularAxis:AngularAxis * ?GridShape:PolarGridShape * ?UIRevision:string -> Polar static member style : ?Domain:Domain * ?Sector:(float * float) * ?Hole:float * ?BGColor:Color * ?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:Color * ?RadialAxis:RadialAxis * ?AngularAxis:AngularAxis * ?GridShape:StyleParam.PolarGridShape * ?UIRevision:string -> Polar
val styledPolar2 : GenericChart.GenericChart
static member Chart.withAngularAxis : angularAxis:AngularAxis * ?Id:StyleParam.SubPlotId -> (GenericChart.GenericChart -> GenericChart.GenericChart)
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:Color * ?ShowLine:bool * ?LineColor:Color * ?LineWidth:int * ?ShowGrid:bool * ?GridColor:Color * ?GridWidth:int * ?TickMode:TickMode * ?NTicks:int * ?Tick0:#IConvertible * ?DTick:#IConvertible * ?TickVals:seq<#IConvertible> * ?TickText:seq<#IConvertible> * ?Ticks:TickOptions * ?TickLen:int * ?TickWidth:int * ?TickColor:Color * ?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:Color * ?ShowLine:bool * ?LineColor:Color * ?LineWidth:int * ?ShowGrid:bool * ?GridColor:Color * ?GridWidth:int * ?TickMode:TickMode * ?NTicks:int * ?Tick0:#IConvertible * ?DTick:#IConvertible * ?TickVals:seq<#IConvertible> * ?TickText:seq<#IConvertible> * ?Ticks:TickOptions * ?TickLen:int * ?TickWidth:int * ?TickColor:Color * ?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 -> AngularAxis
static member 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:Color * ?ShowLine:bool * ?LineColor:Color * ?LineWidth:int * ?ShowGrid:bool * ?GridColor:Color * ?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:Color * ?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 -> AngularAxis
Multiple items
module Color from Plotly.NET

--------------------
type Color = private new : obj:obj -> Color override Equals : other:obj -> bool override GetHashCode : unit -> int static member fromARGB : a:int -> r:int -> g:int -> b:int -> Color static member fromColorScaleValues : c:seq<#IConvertible> -> Color static member fromColors : c:seq<Color> -> Color static member fromHex : s:string -> Color static member fromKeyword : c:ColorKeyword -> Color static member fromRGB : r:int -> g:int -> b:int -> Color static member fromString : c:string -> Color ...
<summary> Plotly color can be a single color, a sequence of colors, or a sequence of numeric values referencing the color of the colorscale obj </summary>
static member Color.fromString : c:string -> Color
static member Chart.withRadialAxis : radialAxis: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:Color * ?ShowLine:bool * ?LineColor:Color * ?LineWidth:int * ?ShowGrid:bool * ?GridColor:Color * ?GridWidth:int * ?TickMode:TickMode * ?NTicks:int * ?Tick0:#IConvertible * ?DTick:#IConvertible * ?TickVals:seq<#IConvertible> * ?TickText:seq<#IConvertible> * ?Ticks:TickOptions * ?TickLen:int * ?TickWidth:int * ?TickColor:Color * ?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:Color * ?ShowLine:bool * ?LineColor:Color * ?LineWidth:int * ?ShowGrid:bool * ?GridColor:Color * ?GridWidth:int * ?TickMode:TickMode * ?NTicks:int * ?Tick0:#IConvertible * ?DTick:#IConvertible * ?TickVals:seq<#IConvertible> * ?TickText:seq<#IConvertible> * ?Ticks:TickOptions * ?TickLen:int * ?TickWidth:int * ?TickColor:Color * ?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 -> RadialAxis
static member 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:Color * ?ShowLine:bool * ?LineColor:Color * ?LineWidth:int * ?ShowGrid:bool * ?GridColor:Color * ?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:Color * ?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 -> 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