Funnel Chart in F#

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

Plotly is known for its graphing libraries, but it's also a broader ecosystem for building interactive data apps, AI data analysis tools, and deploying and hosting Dash apps. Explore the full set of tools and platforms designed to help turn data into action. Discover Plotly.

Note: We are retiring documentation for R, MATLAB, Julia, and F#. 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]: