Skip to content

Funnelarea

Overview

The funnelarea trace type is used to create funnel area charts, which are similar to funnel charts but are represented as a circular area instead of a linear progression. Funnel area charts are useful for comparing stages in a process with proportional sizes. Each stage is represented as a sector of a circle, and its size represents the magnitude of the data.

You can control the colors, labels, and orientation of the funnel area sections to visualize proportional data across different stages.

Common Uses

  • Proportional Stages: Showing the proportion of data at each stage in a circular format.
  • Conversion Rates: Visualizing the drop-off rates in different stages of a process.
  • Sales and Marketing Funnels: Representing funnels like leads-to-sales in a circular format.

Check out the Attributes for the full set of configuration options

Examples

Common Configurations

Here's a simple funnelarea plot showing data in a circular funnel format:

You can copy this code below to create this chart in your project:

models:
  - name: funnelarea-data
    args:
      - echo
      - |
        stage,value
        Leads,1000
        Qualified Leads,750
        Opportunities,400
        Proposals,200
        Closed Deals,100
traces:
  - name: Simple Funnelarea Plot
    model: ref(funnelarea-data)
    props:
      type: funnelarea
      labels: query(stage)
      values: query(value)
charts:
  - name: Simple Funnelarea Chart
    traces:
      - ref(Simple Funnelarea Plot)
    layout:
      title:
        text: Simple Funnelarea Chart<br><sub>Proportional Sales Funnel</sub>

This example shows a funnelarea plot where each stage has a custom color for better differentiation:

Here's the code:

models:
  - name: funnelarea-data-custom
    args:
      - echo
      - |
        stage,value,color
        Awareness,5000,"#1f77b4"
        Interest,3000,"#ff7f0e"
        Consideration,1500,"#2ca02c"
        Decision,700,"#d62728"
        Purchase,300,"#9467bd"
traces:
  - name: Custom Colors Funnelarea Plot
    model: ref(funnelarea-data-custom)
    props:
      type: funnelarea
      labels: query(stage)
      values: query(value)
      marker:
        colors: query(color)
charts:
  - name: Funnelarea Chart with Custom Colors
    traces:
      - ref(Custom Colors Funnelarea Plot)
    layout:
      title:
        text: Funnelarea Chart with Custom Colors<br><sub>User Journey</sub>

This example demonstrates a funnelarea plot with hover information to show the value and percentage for each stage:

Here's the code:

models:
  - name: funnelarea-data-hover
    args:
      - echo
      - |
        stage,value
        Leads,1000
        Opportunities,500
        Proposals,250
        Won,100
traces:
  - name: Funnelarea Plot with Hover Info
    model: ref(funnelarea-data-hover)
    props:
      type: funnelarea
      labels: query(stage)
      values: query(value)
      hoverinfo: "label+value+percent"
charts:
  - name: Funnelarea Chart with Hover Info
    traces:
      - ref(Funnelarea Plot with Hover Info)
    layout:
      title:
        text: Funnelarea Chart with Hover Info<br><sub>Sales Funnel with Hover Details</sub>

Attributes

These attributes apply to traces where trace.props.type is set to funnelarea. You would configure these attributes on the trace with the trace.props object. 

aspectratio: 'number greater than or equal to 0' #(1)!
baseratio: 'number between or equal to 0 and 1' #(2)!
customdata: 'data array' #(3)!
dlabel: 'number' #(4)!
domain:
  column: 'integer greater than or equal to 0' #(5)!
  row: 'integer greater than or equal to 0' #(6)!
  x: 'array' #(7)!
  y: 'array' #(8)!
hoverinfo: 'flaglist string. any combination of "label", "text", "value", "percent",
  "name" joined with a "+" or "all" or "none" or "skip".' #(9)!
hoverlabel:
  align: 'enumerated or array of enumerateds , one of ( "left" | "right" | "auto"
    )' #(10)!
  bgcolor: 'color or array of colors' #(11)!
  bordercolor: 'color or array of colors' #(12)!
  font:
    color: color or array of colors
    family: 'string or array of strings' #(13)!
    size: number or array of numbers greater than or equal to 1
  namelength: 'integer or array of integers greater than or equal to -1' #(14)!
hovertemplate: 'string or array of strings' #(15)!
hovertext: 'string or array of strings' #(16)!
ids: 'data array' #(17)!
insidetextfont:
  color: color or array of colors
  family: 'string or array of strings' #(18)!
  size: number or array of numbers greater than or equal to 1
label0: 'number' #(19)!
labels: 'data array' #(20)!
legendgroup: 'string' #(21)!
legendgrouptitle:
  font:
    color: color
    family: 'string' #(22)!
    size: number greater than or equal to 1
  text: 'string' #(23)!
legendrank: 'number' #(24)!
legendwidth: 'number greater than or equal to 0' #(25)!
marker:
  colors: 'data array' #(26)!
  line:
    color: 'color or array of colors' #(27)!
    width: 'number or array of numbers greater than or equal to 0' #(28)!
meta: 'number or categorical coordinate string' #(29)!
opacity: 'number between or equal to 0 and 1' #(30)!
scalegroup: 'string' #(31)!
showlegend: 'boolean' #(32)!
text: 'data array' #(33)!
textfont:
  color: color or array of colors
  family: 'string or array of strings' #(34)!
  size: number or array of numbers greater than or equal to 1
textinfo: 'flaglist string. any combination of "label", "text", "value", "percent"
  joined with a "+" or "none".' #(35)!
textposition: 'enumerated or array of enumerateds , one of ( "inside" | "none" )' #(36)!
texttemplate: 'string or array of strings' #(37)!
title:
  font:
    color: color or array of colors
    family: 'string or array of strings' #(38)!
    size: number or array of numbers greater than or equal to 1
  position: 'enumerated , one of ( "top left" | "top center" | "top right" )' #(39)!
  text: 'string' #(40)!
type: funnelarea
uirevision: 'number or categorical coordinate string' #(41)!
values: 'data array' #(42)!
visible: 'enumerated , one of ( true | false | "legendonly" )' #(43)!
  1. Sets the ratio between height and width
  2. Sets the ratio between bottom length and maximum top length.
  3. Assigns extra data each datum. This may be useful when listening to hover, click and selection events. Note that, "scatter" traces also appends customdata items in the markers DOM elements
  4. Sets the label step. See label0 for more info.
  5. If there is a layout grid, use the domain for this column in the grid for this funnelarea trace .
  6. If there is a layout grid, use the domain for this row in the grid for this funnelarea trace .
  7. Sets the horizontal domain of this funnelarea trace (in plot fraction).
  8. Sets the vertical domain of this funnelarea trace (in plot fraction).
  9. Determines which trace information appear on hover. If none or skip are set, no information is displayed upon hovering. But, if none is set, click and hover events are still fired.
  10. Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines
  11. Sets the background color of the hover labels for this trace
  12. Sets the border color of the hover labels for this trace.
  13. HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
  14. Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to namelength - 3 characters and add an ellipsis.
  15. Template string used for rendering the information that appear on hover box. Note that this will override hoverinfo. Variables are inserted using %{variable}, for example "y: %{y}" as well as %{xother}, {%xother}, {%_xother}, {%xother_}. When showing info for several points, "xother" will be added to those with different x positions from the first point. An underscore before or after "(x|y)other" will add a space on that side, only when this field is shown. Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". https://github.com/d3/d3-format/tree/v1.4.5#d3-format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. The variables available in hovertemplate are the ones emitted as event data described at this link https://plotly.com/javascript/plotlyjs-events/#event-data. Additionally, every attributes that can be specified per-point (the ones that are arrayOk: true) are available. variables label, color, value, text and percent. Anything contained in tag <extra> is displayed in the secondary box, for example "{fullData.name}". To hide the secondary box completely, use an empty tag <extra></extra>.
  16. Sets hover text elements associated with each sector. If a single string, the same string appears for all data points. If an array of string, the items are mapped in order of this trace's sectors. To be seen, trace hoverinfo must contain a "text" flag.
  17. Assigns id labels to each datum. These ids for object constancy of data points during animation. Should be an array of strings, not numbers or any other type.
  18. HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
  19. Alternate to labels. Builds a numeric set of labels. Use with dlabel where label0 is the starting label and dlabel the step.
  20. Sets the sector labels. If labels entries are duplicated, we sum associated values or simply count occurrences if values is not provided. For other array attributes (including color) we use the first non-empty entry among all occurrences of the label.
  21. Sets the legend group for this trace. Traces part of the same legend group hide/show at the same time when toggling legend items.
  22. HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
  23. Sets the title of the legend group.
  24. Sets the legend rank for this trace. Items and groups with smaller ranks are presented on top/left side while with "reversed"legend.traceorder` they are on bottom/right side. The default legendrank is 1000, so that you can use ranks less than 1000 to place certain items before all unranked items, and ranks greater than 1000 to go after all unranked items.
  25. Sets the width (in px or fraction) of the legend for this trace.
  26. Sets the color of each sector. If not specified, the default trace color set is used to pick the sector colors.
  27. Sets the color of the line enclosing each sector. Defaults to the paper_bgcolor value.
  28. Sets the width (in px) of the line enclosing each sector.
  29. Assigns extra meta information associated with this trace that can be used in various text attributes. Attributes such as trace name, graph, axis and colorbar title.text, annotation text rangeselector, updatemenues and sliders label text all support meta. To access the trace meta values in an attribute in the same trace, simply use %{meta[i]} where i is the index or key of the meta item in question. To access trace meta in layout attributes, use %{data[n[.meta[i]} where i is the index or key of the meta and n is the trace index.
  30. Sets the opacity of the trace.
  31. If there are multiple funnelareas that should be sized according to their totals, link them by providing a non-empty group id here shared by every trace in the same group.
  32. Determines whether or not an item corresponding to this trace is shown in the legend.
  33. Sets text elements associated with each sector. If trace textinfo contains a "text" flag, these elements will be seen on the chart. If trace hoverinfo contains a "text" flag and "hovertext" is not set, these elements will be seen in the hover labels.
  34. HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
  35. Determines which trace information appear on the graph.
  36. Specifies the location of the textinfo.
  37. Template string used for rendering the information text that appear on points. Note that this will override textinfo. Variables are inserted using %{variable}, for example "y: %{y}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". https://github.com/d3/d3-format/tree/v1.4.5#d3-format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. Every attributes that can be specified per-point (the ones that are arrayOk: true) are available. variables label, color, value, text and percent.
  38. HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
  39. Specifies the location of the title. Note that the title's position used to be set by the now deprecated titleposition attribute.
  40. Sets the title of the chart. If it is empty, no title is displayed. Note that before the existence of title.text, the title's contents used to be defined as the title attribute itself. This behavior has been deprecated.
  41. Controls persistence of some user-driven changes to the trace: constraintrange in parcoords traces, as well as some editable: true modifications such as name and colorbar.title. Defaults to layout.uirevision. Note that other user-driven trace attribute changes are controlled by layout attributes: trace.visible is controlled by layout.legend.uirevision, selectedpoints is controlled by layout.selectionrevision, and colorbar.(x|y) (accessible with config: {editable: true}) is controlled by layout.editrevision. Trace changes are tracked by uid, which only falls back on trace index if no uid is provided. So if your app can add/remove traces before the end of the data array, such that the same trace has a different index, you can still preserve user-driven changes if you give each trace a uid that stays with it as it moves.
  42. Sets the values of the sectors. If omitted, we count occurrences of each label.
  43. Determines whether or not this trace is visible. If "legendonly", the trace is not drawn, but can appear as a legend item (provided that the legend itself is visible).