Funnel Chart in F#

How to make funnel-chart plots in F# with Plotly.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Note: We are retiring documentation for R, MATLAB, Julia, and F# in November 2025. Learn more about this change here.

In [1]:

#r "nuget: Newtonsoft.Json, 12.0.3" #r "nuget: Plotly.NET, 2.0.0-preview.10" #r "nuget: Plotly.NET.Interactive, 2.0.0-preview.10"

Installed Packages

Newtonsoft.Json, 12.0.3
Plotly.NET, 2.0.0-preview.10
Plotly.NET.Interactive, 2.0.0-preview.10

Loading extensions from Plotly.NET.Interactive.dll

Added Kernel Extension including formatters for Plotly.NET charts.

Introduction¶

Funnel charts are often used to represent data in different stages of a business process. It’s an important mechanism in Business Intelligence to identify potential problem areas of a process. For example, it’s used to observe the revenue or loss in a sales process for each stage, and displays values that are decreasing progressively. Each stage is illustrated as a percentage of the total of all values.

Basic Funnel Chart¶

In [2]:

open Plotly.NET let y = ["Website visit"; "Downloads"; "Potential customers"; "Requested price"; "invoice sent"] let x = [39.; 27.4; 20.6; 11.; 2.] Chart.Funnel(x,y) |> Chart.withMarginSize(Left=150.)

Out[2]:

Setting Marker Size and Color¶

This example uses TextPosition and TextInfo to determine information appears on the graph, and shows how to customize the bars.

In [3]:

open Plotly.NET open Plotly.NET.TraceObjects let y = ["Website visit"; "Downloads"; "Potential customers"; "Requested price"; "invoice sent"] let x = [39.; 27.4; 20.6; 11.; 2.] let colors = ["deepskyblue";"lightsalmon"; "tan"; "teal"; "silver"] |> Seq.map (fun c -> Color.fromString c) |> Color.fromColors let lineColors = ["wheat";"wheat"; "blue"; "wheat"; "wheat"] |> Seq.map (fun c -> Color.fromString c) |> Color.fromColors let connector = FunnelConnector.init ( Line = Line.init (Color = Color.fromString "royalblue", Dash = StyleParam.DrawingStyle.Dash, Width = 3.) ) Chart.Funnel(x, y, TextPosition = StyleParam.TextPosition.Inside, Opacity = 0.65, Connector = connector) |> GenericChart.mapTrace (fun t -> t?textinfo <- "value+percent initial" t) |> Chart.withMarkerStyle (Color = colors, Outline = Line.init (Color = lineColors, Width = 3.))

Out[3]:

Stacked Funnel Plot¶

In [4]:

let y = ["Website visit"; "Downloads"; "Potential customers"; "Requested price"] let chart1 = Chart.Funnel([120; 60; 30; 20],y,Name="Montreal") |> GenericChart.mapTrace(fun t -> t?textinfo <- "value+percent initial";t) let chart2 = Chart.Funnel( [ 100; 60; 40; 30; 20 ], y, TextPosition = StyleParam.TextPosition.Inside, Orientation = StyleParam.Orientation.Horizontal, Name = "Toronto" )|> GenericChart.mapTrace(fun t -> t?textinfo <- "value+percent previous";t) let final = y@ ["Finalized"] let chart3 = Chart.Funnel( [ 90; 70; 50; 30; 10; 5], final, TextPosition = StyleParam.TextPosition.Outside, Orientation = StyleParam.Orientation.Horizontal, Name = "Vancouver" ) |> GenericChart.mapTrace(fun t -> t?textinfo <- "value+percent total";t) [chart1;chart2;chart3] |> Chart.combine |> Chart.withMarginSize(Left=150.) |> Chart.withSize(Width=800) |> Chart.withLayout(Layout.init(PlotBGColor=Color.fromString "#e5ecf6"))

Out[4]:

Basic Area Funnel Plot¶

In [5]:

open Plotly.NET Chart.FunnelArea(Text=["The 1st";"The 2nd"; "The 3rd"; "The 4th"; "The 5th"],Values=[5; 4; 3; 2; 1])

Out[5]:

Set Marker Size and Color in Area Funnel Plots¶

In [6]:

open Plotly.NET let colors = ["deepskyblue";"lightsalmon"; "tan"; "teal"; "silver"] |> Seq.map (fun c -> Color.fromString c) let lineColors = ["wheat";"wheat"; "blue"; "wheat"; "wheat"] |> Seq.map (fun c -> Color.fromString c) |> Color.fromColors Chart.FunnelArea( Text = [ "The 1st" "The 2nd" "The 3rd" "The 4th" "The 5th" ], Values = [ 5; 4; 3; 2; 1 ], Insidetextfont = Font.init (Family = StyleParam.FontFamily.Old_Standard_TT, Size = 13., Color = Color.fromString "black"), Opacity = 0.65 ) |> Chart.withMarkerStyle (Colors = colors, Outline = Line.init (Color = lineColors, Width = 4.))

Out[6]: