Funnel Charts

BinderScriptNotebook

Summary: This example shows how to create funnel charts in F#.

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

let y = [|"Sales person A"; "Sales person B"; "Sales person C"; "Sales person D"; "Sales person E"|]
let x = [|1200.; 909.4; 600.6; 300.; 80.|]

Funnel charts visualize stages in a process using length-encoded bars. This trace can be used to show data in either a part-to-whole representation wherein each item appears in a single stage, or in a "drop-off" representation wherein each item appears in each stage it traversed. See also the FunnelArea chart for a different approach to visualizing funnel data.

open Plotly.NET 

// Customize the connector lines used to connect the funnel bars
let connectorLine = Line.init (Color="royalblue", Dash=StyleParam.DrawingStyle.Dot, Width=3.)
let connector = FunnelConnector.init(Line=connectorLine)

// Customize the outline of the funnel bars
let line = Line.init(Width=2.,Color="3E4E88")

// create a funnel chart using custom connectors and outlines
let funnel =
    Chart.Funnel (x,y,Color="59D4E8", Line=line, Connector=connector)
    |> Chart.withMarginSize(Left=100)
val y : string []
val x : float []
namespace Plotly
namespace Plotly.NET
val connectorLine : Line
Multiple items
type Line = inherit DynamicObj new : unit -> Line static member init : ?Width:float * ?Color:string * ?Shape:Shape * ?Dash:DrawingStyle * ?Smoothing:float * ?Colorscale:Colorscale * ?OutlierColor:string * ?OutlierWidth:float -> Line static member style : ?Width:float * ?Color:string * ?Shape:Shape * ?Dash:DrawingStyle * ?Smoothing:float * ?Colorscale:Colorscale * ?OutlierColor:string * ?OutlierWidth:float -> (Line -> Line)
<summary> Line type inherits from dynamic object </summary>

--------------------
new : unit -> Line
static member Line.init : ?Width:float * ?Color:string * ?Shape:StyleParam.Shape * ?Dash:StyleParam.DrawingStyle * ?Smoothing:float * ?Colorscale:StyleParam.Colorscale * ?OutlierColor:string * ?OutlierWidth:float -> Line
module StyleParam from Plotly.NET
type DrawingStyle = | Solid | Dash | Dot | DashDot | User of int static member convert : (DrawingStyle -> obj) static member toString : (DrawingStyle -> string)
<summary> Dash: Sets the drawing style of the lines segments in this trace. Sets the style of the lines. Set to a dash string type or a dash length in px. </summary>
union case StyleParam.DrawingStyle.Dot: StyleParam.DrawingStyle
val connector : FunnelConnector
Multiple items
type FunnelConnector = inherit DynamicObj new : unit -> FunnelConnector static member init : ?Fillcolor:string * ?Line:Line * ?Visible:bool -> FunnelConnector static member style : ?Fillcolor:string * ?Line:Line * ?Visible:bool -> (FunnelConnector -> FunnelConnector)
<summary> Styles for connector lines in Funnel Charts. Parameters: Line : Sets the Line style for this WaterfallConnector Visible : Wether or not connectors are visible ConnectorMode : Sets the shape of connector lines. </summary>

--------------------
new : unit -> FunnelConnector
static member FunnelConnector.init : ?Fillcolor:string * ?Line:Line * ?Visible:bool -> FunnelConnector
val line : Line
val funnel : 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.Funnel : x:seq<#System.IConvertible> * y:seq<#System.IConvertible> * ?Name:string * ?Showlegend:bool * ?Opacity:float * ?Labels:seq<#System.IConvertible> * ?TextPosition:StyleParam.TextPosition * ?TextFont:Font * ?Color:string * ?Line:Line * ?x0:'d * ?dX:float * ?y0:'e * ?dY:float * ?Width:float * ?Offset:float * ?Orientation:StyleParam.Orientation * ?Alignmentgroup:string * ?Offsetgroup:string * ?Cliponaxis:bool * ?Connector:FunnelConnector * ?Insidetextfont:Font * ?Outsidetextfont:Font -> GenericChart.GenericChart
static member Chart.withMarginSize : ?Left:'a * ?Right:'b * ?Top:'c * ?Bottom:'d * ?Pad:'e * ?Autoexpand:'f -> (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>