Holochart

funnelarea attributes ​

Funnel areas: the stages of a process as stacked trapezoids with areas proportional to their values, placed by domain, drawn as one batched GPU polygon fill with batched SDF labels.

  • Categories: domain, pie-like, funnelarea, showLegend
  • Plotly equivalent: funnelarea
  • Guide: funnelarea chart page
  • Used in examples: demos/science-basics/sun-funnelarea, funnelarea/basic, funnelarea/colors, funnelarea/domains, funnelarea/interaction, funnelarea/patterns, funnelarea/ratios, funnelarea/texttemplate, funnelarea/uniformtext

Generated from the attribute schema (87 entries). Machine-readable: plot-schema.json.

Attribute tree

type string ​

Trace type, e.g. 'scatter'. Defaults to 'scatter'.

  • Type: string (non-empty)
  • Default: none
  • Array OK: no
  • Edit type: calc
  • Animatable: no

visible enumerated ​

Whether the trace is drawn. legendonly hides it but keeps its (toggleable) legend entry.

  • Type: enumerated
  • Values: true | false | "legendonly"
  • Default: true
  • Array OK: no
  • Edit type: calc
  • Animatable: no

name string ​

Trace name shown in the legend and hover labels. Defaults to trace N.

  • Type: string
  • Default: none
  • Array OK: no
  • Edit type: legend+plot
  • Animatable: no

uid string ​

Stable identity used to match traces across updates, so reordered traces are moved instead of rebuilt.

  • Type: string
  • Default: none
  • Array OK: no
  • Edit type: plot
  • Animatable: no

showlegend boolean ​

Whether this trace has a legend entry.

  • Type: boolean
  • Default: true
  • Array OK: no
  • Edit type: legend+layout
  • Animatable: no

legend subplotid ​

The legend this trace's item is shown in: 'legend' (layout.legend), 'legend2' (layout.legend2), ….

  • Type: subplotid (legend, legend2, legend3, …)
  • Default: "legend"
  • Array OK: no
  • Edit type: legend+layout
  • Animatable: no

legendgroup string ​

Traces in the same legend group toggle together.

  • Type: string
  • Default: ""
  • Array OK: no
  • Edit type: legend
  • Animatable: no

hovertext string ​

Hover text per point; defaults to text.

  • Type: string
  • Default: ""
  • Array OK: yes (one value per point)
  • Edit type: style
  • Animatable: no

hoverinfo flaglist ​

Which fields hover labels show, in a fixed order; 'skip' also turns hover events off for this trace. Default 'all'.

  • Type: flaglist
  • Flags: "label", "text", "value", "percent", "name" (combine with +)
  • Also accepts: "all" | "none" | "skip"
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: none
  • Animatable: no

hovertemplate string ​

Template for hover labels, e.g. '%{x}: %{y:.2f}<extra></extra>' (d3-format / d3-time-format after : / |). Overrides hoverinfo.

  • Type: string
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: none
  • Animatable: no

hoverlabel ​

Hover label style for this trace. Unset fields fall back to layout.hoverlabel (so there are no trace-level defaults).

  • Type: object
  • Edit type: none

hoverlabel.bgcolor color ​

Label background. Default: the point color.

  • Type: color
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: none
  • Animatable: no

hoverlabel.bordercolor color ​

Label border. Default: contrasting with the background.

  • Type: color
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: none
  • Animatable: no

hoverlabel.font ​

Label font.

  • Type: object
  • Edit type: none

hoverlabel.font.family string ​

Font family.

  • Type: string
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: none
  • Animatable: no

hoverlabel.font.size number ​

Font size in px.

  • Type: number ≥ 1
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: none
  • Animatable: no

hoverlabel.font.color color ​

Font color.

  • Type: color
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: none
  • Animatable: no

hoverlabel.align enumerated ​

Text alignment inside labels.

  • Type: enumerated
  • Values: "left" | "right" | "auto"
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: none
  • Animatable: no

hoverlabel.namelength integer ​

Characters of the trace name shown (-1: all, 0: none).

  • Type: integer ≥ -1
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: none
  • Animatable: no

selectedpoints any ​

Indices of the selected points (set by box/lasso selection, or programmatically). null clears the selection.

  • Type: any
  • Default: none
  • Array OK: no
  • Edit type: style
  • Animatable: no

legendrank number ​

Sort key for legend entries: lower ranks come first (top, or left). Ties keep trace order; traces default to 1000.

  • Type: number
  • Default: 1000
  • Array OK: no
  • Edit type: legend
  • Animatable: no

legendwidth number ​

Width of this trace's item in horizontal legends, overriding legend.entrywidth (same units). Default: its text's.

  • Type: number ≥ 0
  • Default: none
  • Array OK: no
  • Edit type: legend
  • Animatable: no

legendgrouptitle ​

Title of the legend group this trace belongs to.

  • Type: object
  • Edit type: legend

legendgrouptitle.text string ​

Title heading this trace's legend group.

  • Type: string
  • Default: ""
  • Array OK: no
  • Edit type: legend
  • Animatable: no

legendgrouptitle.font ​

Group title font. Unset fields come from legend.grouptitlefont.

  • Type: object
  • Edit type: legend

legendgrouptitle.font.family string ​

Font family.

  • Type: string
  • Default: none
  • Array OK: no
  • Edit type: legend
  • Animatable: no

legendgrouptitle.font.size number ​

Font size in px.

  • Type: number ≥ 1
  • Default: none
  • Array OK: no
  • Edit type: legend
  • Animatable: no

legendgrouptitle.font.color color ​

Font color.

  • Type: color
  • Default: none
  • Array OK: no
  • Edit type: legend
  • Animatable: no

legendgrouptitle.font.weight integer ​

Font weight: a CSS numeric weight (1–1000), normal or bold.

  • Type: integer from 1 to 1000, or "normal" | "bold"
  • Default: none
  • Array OK: no
  • Edit type: legend
  • Animatable: no

legendgrouptitle.font.style enumerated ​

Font style.

  • Type: enumerated
  • Values: "normal" | "italic"
  • Default: none
  • Array OK: no
  • Edit type: legend
  • Animatable: no

opacity number ​

Opacity of the whole trace.

  • Type: number from 0 to 1
  • Default: 1
  • Array OK: no
  • Edit type: style
  • Animatable: yes

meta any ​

Arbitrary user data, available in text templates as %{meta}.

  • Type: any
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: plot
  • Animatable: no

customdata data_array ​

Per-point user data, returned in events and available in hover templates.

  • Type: data_array (array or typed array)
  • Default: none
  • Array OK: no
  • Edit type: calc
  • Animatable: no

ids data_array ​

Per-point ids used to match points across animation frames.

  • Type: data_array (array or typed array)
  • Default: none
  • Array OK: no
  • Edit type: calc
  • Animatable: no

dataset string ​

Name of a figure-level dataset (figure.datasets). Data arrays, and per-point attributes whose values cannot start with @ (such as colors and sizes), may then reference its columns as '@column'; on string attributes such as text, '@…' stays literal text.

  • Type: string (non-empty)
  • Default: none
  • Array OK: no
  • Edit type: calc
  • Animatable: no

uirevision any ​

While unchanged, user interaction state for this trace (legend visibility, selections) is kept across updates.

  • Type: any
  • Default: none
  • Array OK: no
  • Edit type: none
  • Animatable: no

styleRules any ​

Conditional per-point styling as JSON (plan E8.5): [{ when: { y: { gt: 10 } }, set: { 'marker.color': 'gold' } }]. when tests fields of the point ('y', 'customdata[1]', 'pointNumber', …) with eq, ne, gt, gte, lt, lte, in, nin, between, regex, and, or and not; set gives per-point (arrayOk) attributes a value on the matching points. Later rules win; other points keep the trace's own value.

  • Type: any
  • Default: none
  • Array OK: no
  • Edit type: calc
  • Animatable: no

domain ​

Where this trace is drawn, as a part of the plot area.

  • Type: object
  • Edit type: plot

domain.x info_array ​

Horizontal extent [start, end] of this trace as fractions of the plot area. Defaults to the layout.grid column when column is set, else [0, 1].

  • Type: info_array [number, number]
  • Default: [0, 1]
  • Array OK: no
  • Edit type: plot
  • Animatable: no

domain.y info_array ​

Vertical extent [start, end] of this trace as fractions of the plot area (from the bottom). Defaults to the layout.grid row when row is set, else [0, 1].

  • Type: info_array [number, number]
  • Default: [0, 1]
  • Array OK: no
  • Edit type: plot
  • Animatable: no

domain.row integer ​

Row of the layout.grid cell this trace is placed in (0 = first row in roworder). Only used with a grid.

  • Type: integer ≥ 0
  • Default: 0
  • Array OK: no
  • Edit type: plot
  • Animatable: no

domain.column integer ​

Column of the layout.grid cell this trace is placed in (0 = leftmost). Only used with a grid.

  • Type: integer ≥ 0
  • Default: 0
  • Array OK: no
  • Edit type: plot
  • Animatable: no

labels data_array ​

Slice labels. Slices with the same label are merged: their values are summed (or occurrences counted without values), and other per-slice attributes use the first non-empty entry.

  • Type: data_array (array or typed array)
  • Default: none
  • Array OK: no
  • Edit type: calc
  • Animatable: no

label0 number ​

Without labels: numeric labels label0 + i·dlabel (only used when values is set).

  • Type: number
  • Default: 0
  • Array OK: no
  • Edit type: calc
  • Animatable: no

dlabel number ​

Label step, see label0.

  • Type: number
  • Default: 1
  • Array OK: no
  • Edit type: calc
  • Animatable: no

values data_array ​

Slice values. Non-numeric entries are skipped; merged slices whose total is negative are dropped. Without values every label counts 1.

  • Type: data_array (array or typed array)
  • Default: none
  • Array OK: no
  • Edit type: calc
  • Animatable: no

marker ​

Stage style.

  • Type: object
  • Edit type: calc

marker.colors data_array ​

Stage colors, one per data point. Unset stages take layout.funnelareacolorway colors, shared by label across all funnel areas of the figure.

  • Type: data_array (array or typed array)
  • Default: none
  • Array OK: no
  • Edit type: calc
  • Animatable: no

marker.line ​

Stage outlines.

  • Type: object
  • Edit type: calc

marker.line.color color ​

Outline color of the stages, or one per stage. Default: layout.paper_bgcolor.

  • Type: color
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: style
  • Animatable: no

marker.line.width number ​

Outline width in CSS px (centered on the edge), or one per stage.

  • Type: number ≥ 0
  • Default: 1
  • Array OK: yes (one value per point)
  • Edit type: style
  • Animatable: no

marker.pattern ​

Hatch pattern of the stage fill (drawn in screen px, for print and grayscale).

  • Type: object
  • Edit type: style

marker.pattern.shape enumerated ​

Hatch shape: diagonal ('/', '\\', 'x'), horizontal and vertical ('-', '|', '+') lines or dots ('.'); '' for none, or one per stage.

  • Type: enumerated
  • Values: "" | "/" | "\\" | "x" | "-" | "|" | "+" | "."
  • Default: ""
  • Array OK: yes (one value per point)
  • Edit type: style
  • Animatable: no

marker.pattern.fillmode enumerated ​

'replace': the pattern in the fill color on bgcolor (default transparent) replaces the fill; 'overlay': the pattern is drawn over the fill color, in its contrast color at half opacity by default.

  • Type: enumerated
  • Values: "replace" | "overlay"
  • Default: "replace"
  • Array OK: no
  • Edit type: style
  • Animatable: no

marker.pattern.bgcolor color ​

Pattern background. Default: the fill color with fillmode: 'overlay', else transparent, or one per stage.

  • Type: color
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: style
  • Animatable: no

marker.pattern.fgcolor color ​

Pattern color. Default: the fill color with fillmode: 'replace', else white or dark grey, whichever contrasts with bgcolor, or one per stage.

  • Type: color
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: style
  • Animatable: no

marker.pattern.fgopacity number ​

Opacity of the pattern color. Default 0.5 with fillmode: 'overlay', else 1.

  • Type: number from 0 to 1
  • Default: none
  • Array OK: no
  • Edit type: style
  • Animatable: no

marker.pattern.size number ​

Size of the pattern's tiles in CSS px: the spacing of its lines or dots, or one per stage.

  • Type: number ≥ 0
  • Default: 8
  • Array OK: yes (one value per point)
  • Edit type: style
  • Animatable: no

marker.pattern.solidity number ​

Fraction of the area the pattern covers: 0 shows only the background, 1 only the pattern color, or one per stage.

  • Type: number from 0 to 1
  • Default: 0.3
  • Array OK: yes (one value per point)
  • Edit type: style
  • Animatable: no

text data_array ​

Text per slice, shown on the slice with the text flag of textinfo, and in hover labels unless hovertext is set.

  • Type: data_array (array or typed array)
  • Default: none
  • Array OK: no
  • Edit type: plot
  • Animatable: no

scalegroup string ​

Funnel areas with the same non-empty scale group are sized by their totals: their areas are proportional to the sums of their values.

  • Type: string
  • Default: ""
  • Array OK: no
  • Edit type: calc
  • Animatable: no

textinfo flaglist ​

What stage labels show, in a fixed order (label, text, value, percent of the total), one per line. Default 'percent', or 'text+percent' when text is an array. Use texttemplate for other layouts.

  • Type: flaglist
  • Flags: "label", "text", "value", "percent" (combine with +)
  • Also accepts: "none"
  • Default: none
  • Array OK: no
  • Edit type: calc
  • Animatable: no

texttemplate string ​

Template for stage labels, overriding textinfo: %{label}, %{value}, %{percent}, %{text}, %{color}, %{customdata}, %{meta}, with optional d3 formats (%{percent:.1%}). Without a format, value and percent are formatted like textinfo.

  • Type: string
  • Default: ""
  • Array OK: yes (one value per point)
  • Edit type: plot
  • Animatable: no

textposition enumerated ​

Where stage labels go: inside (centered in the stage, shrunk to fit) or none.

  • Type: enumerated
  • Values: "inside" | "none"
  • Default: "inside"
  • Array OK: yes (one value per point)
  • Edit type: plot
  • Animatable: no

textfont ​

Font of slice labels. Defaults to layout.font.

  • Type: object
  • Edit type: plot

textfont.family string ​

CSS font-family list.

  • Type: string (non-empty)
  • Default: none
  • Array OK: no
  • Edit type: plot
  • Animatable: no

textfont.size number ​

Font size in CSS px, or one per slice.

  • Type: number ≥ 1
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: plot
  • Animatable: no

textfont.color color ​

Text color, or one per slice.

  • Type: color
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: style
  • Animatable: no

textfont.weight integer ​

Font weight: a CSS numeric weight (1–1000), normal or bold.

  • Type: integer from 1 to 1000, or "normal" | "bold"
  • Default: none
  • Array OK: no
  • Edit type: plot
  • Animatable: no

textfont.style enumerated ​

Font style.

  • Type: enumerated
  • Values: "normal" | "italic"
  • Default: none
  • Array OK: no
  • Edit type: plot
  • Animatable: no

insidetextfont ​

Font of labels inside slices. Defaults to textfont, with a color contrasting the slice.

  • Type: object
  • Edit type: plot

insidetextfont.family string ​

CSS font-family list.

  • Type: string (non-empty)
  • Default: none
  • Array OK: no
  • Edit type: plot
  • Animatable: no

insidetextfont.size number ​

Font size in CSS px, or one per slice.

  • Type: number ≥ 1
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: plot
  • Animatable: no

insidetextfont.color color ​

Text color, or one per slice.

  • Type: color
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: style
  • Animatable: no

insidetextfont.weight integer ​

Font weight: a CSS numeric weight (1–1000), normal or bold.

  • Type: integer from 1 to 1000, or "normal" | "bold"
  • Default: none
  • Array OK: no
  • Edit type: plot
  • Animatable: no

insidetextfont.style enumerated ​

Font style.

  • Type: enumerated
  • Values: "normal" | "italic"
  • Default: none
  • Array OK: no
  • Edit type: plot
  • Animatable: no

title ​

The funnel area title.

  • Type: object
  • Edit type: plot

title.text string ​

Title of the pie. Empty: no title.

  • Type: string
  • Default: ""
  • Array OK: no
  • Edit type: plot
  • Animatable: no

title.font ​

Title font. Defaults to layout.font.

  • Type: object
  • Edit type: plot

title.font.family string ​

CSS font-family list.

  • Type: string (non-empty)
  • Default: none
  • Array OK: no
  • Edit type: plot
  • Animatable: no

title.font.size number ​

Font size in CSS px, or one per slice.

  • Type: number ≥ 1
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: plot
  • Animatable: no

title.font.color color ​

Text color, or one per slice.

  • Type: color
  • Default: none
  • Array OK: yes (one value per point)
  • Edit type: style
  • Animatable: no

title.font.weight integer ​

Font weight: a CSS numeric weight (1–1000), normal or bold.

  • Type: integer from 1 to 1000, or "normal" | "bold"
  • Default: none
  • Array OK: no
  • Edit type: plot
  • Animatable: no

title.font.style enumerated ​

Font style.

  • Type: enumerated
  • Values: "normal" | "italic"
  • Default: none
  • Array OK: no
  • Edit type: plot
  • Animatable: no

title.position enumerated ​

Where the title goes above the funnel.

  • Type: enumerated
  • Values: "top left" | "top center" | "top right"
  • Default: "top center"
  • Array OK: no
  • Edit type: plot
  • Animatable: no

aspectratio number ​

Height of the funnel relative to its width.

  • Type: number ≥ 0
  • Default: 1
  • Array OK: no
  • Edit type: plot
  • Animatable: no

baseratio number ​

Width of the funnel's narrow end relative to its wide end.

  • Type: number from 0 to 1
  • Default: 0.333
  • Array OK: no
  • Edit type: plot
  • Animatable: no

Released under the MIT License.

Copyright © 2026 Holochart contributors