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)!
- Sets the ratio between height and width
- Sets the ratio between bottom length and maximum top length.
- 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
- Sets the label step. See
label0
for more info. - If there is a layout grid, use the domain for this column in the grid for this funnelarea trace .
- If there is a layout grid, use the domain for this row in the grid for this funnelarea trace .
- Sets the horizontal domain of this funnelarea trace (in plot fraction).
- Sets the vertical domain of this funnelarea trace (in plot fraction).
- Determines which trace information appear on hover. If
none
orskip
are set, no information is displayed upon hovering. But, ifnone
is set, click and hover events are still fired. - 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
- Sets the background color of the hover labels for this trace
- Sets the border color of the hover labels for this trace.
- 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".
- 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. - 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 inhovertemplate
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 arearrayOk: true
) are available. variableslabel
,color
,value
,text
andpercent
. 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>
. - 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. - 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.
- 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".
- Alternate to
labels
. Builds a numeric set of labels. Use withdlabel
wherelabel0
is the starting label anddlabel
the step. - Sets the sector labels. If
labels
entries are duplicated, we sum associatedvalues
or simply count occurrences ifvalues
is not provided. For other array attributes (including color) we use the first non-empty entry among all occurrences of the label. - Sets the legend group for this trace. Traces part of the same legend group hide/show at the same time when toggling legend items.
- 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".
- Sets the title of the legend group.
- 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. - Sets the width (in px or fraction) of the legend for this trace.
- Sets the color of each sector. If not specified, the default trace color set is used to pick the sector colors.
- Sets the color of the line enclosing each sector. Defaults to the
paper_bgcolor
value. - Sets the width (in px) of the line enclosing each sector.
- Assigns extra meta information associated with this trace that can be used in various text attributes. Attributes such as trace
name
, graph, axis and colorbartitle.text
, annotationtext
rangeselector
,updatemenues
andsliders
label
text all supportmeta
. To access the tracemeta
values in an attribute in the same trace, simply use%{meta[i]}
wherei
is the index or key of themeta
item in question. To access tracemeta
in layout attributes, use%{data[n[.meta[i]}
wherei
is the index or key of themeta
andn
is the trace index. - Sets the opacity of the trace.
- 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.
- Determines whether or not an item corresponding to this trace is shown in the legend.
- Sets text elements associated with each sector. If trace
textinfo
contains a "text" flag, these elements will be seen on the chart. If tracehoverinfo
contains a "text" flag and "hovertext" is not set, these elements will be seen in the hover labels. - 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".
- Determines which trace information appear on the graph.
- Specifies the location of the
textinfo
. - 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 arearrayOk: true
) are available. variableslabel
,color
,value
,text
andpercent
. - 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".
- Specifies the location of the
title
. Note that the title's position used to be set by the now deprecatedtitleposition
attribute. - 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 thetitle
attribute itself. This behavior has been deprecated. - Controls persistence of some user-driven changes to the trace:
constraintrange
inparcoords
traces, as well as someeditable: true
modifications such asname
andcolorbar.title
. Defaults tolayout.uirevision
. Note that other user-driven trace attribute changes are controlled bylayout
attributes:trace.visible
is controlled bylayout.legend.uirevision
,selectedpoints
is controlled bylayout.selectionrevision
, andcolorbar.(x|y)
(accessible withconfig: {editable: true}
) is controlled bylayout.editrevision
. Trace changes are tracked byuid
, which only falls back on trace index if nouid
is provided. So if your app can add/remove traces before the end of thedata
array, such that the same trace has a different index, you can still preserve user-driven changes if you give each trace auid
that stays with it as it moves. - Sets the values of the sectors. If omitted, we count occurrences of each label.
- 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).