Funnel
- Recommended field configuration:
1measure,1dimension - Supports data reshaping: at least
1measure,0dimensions :::
:::info{title=Encoding Mapping} The Funnel chart supports the following visual channels:
size : size channel, supports multiple measures, maps measure values to funnel width
detail : detail channel, supports multiple dimensions, used to display finer-grained data within the same color series
color : color channel, supports multiple dimensions or one measure; dimension colors distinguish data series, and measure colors linearly map measure values to graphical colors
tooltip: tooltip channel, supports multiple dimensions and multiple measures, displayed when hovering over a data point
label : label channel, supports multiple dimensions and multiple measures, displays data labels on data points
Funnel chart, used to show the proportional relationship of single-dimension data.
Applicable scenarios:
Funnel chart applicable scenarios:
- Suitable for analyzing processes with multiple continuous, standardized steps, clearly showing data loss or conversion at each stage
Data requirements:
- At least 1 numeric field (measure)
- All dimensions are merged with measure names (when multiple measures exist) into one dimension and displayed as legend items
- All measures are automatically merged into one measure
Features enabled by default:
- Legend, data labels, tooltips, and percentage calculation are enabled by default
chartType
Type: "funnel"
Funnel chart
Funnel chart, showing the proportional relationship of single-dimension data.
Example 'funnel'
dataset
Type: Record[]
Dataset. A TidyData-compliant, already aggregated dataset used to define the chart data source and structure. User input does not need any preprocessing; VSeed has powerful data reshaping capabilities and reshapes the data automatically. Funnel chart data is ultimately converted into 1 dimension and 1 measure.
Example [{category:'A', value:30}, {category:'B', value:70}]
dimensions
Type: PieDimension[] | undefined
Dimensions
For Funnel charts, all dimensions are merged with measure names (when multiple measures exist) into one dimension and displayed as legend items.
Example [{id: 'category', alias: 'Category'}]
id
Type: string
Field ID corresponding to the dimension
alias
Type: string | undefined
Dimension alias
timeFormat
Type: TimeFormat | undefined
Dimension date format configuration
type
Type: "year" | "quarter" | "month" | "week" | "day" | "hour" | "minute" | "second"
Time granularity, determines the date display precision
encoding
Type: "color" | "detail" | "tooltip" | "label" | "row" | "column" | undefined
Channel to which the dimension is mapped:
-
color: supports mapping multiple dimensions to the color channel
-
detail: supports mapping multiple dimensions to the detail channel
-
tooltip: supports mapping multiple dimensions to the tooltip channel
-
label: supports mapping multiple dimensions to the label channel
-
row: supports mapping multiple dimensions to the row channel
-
column: supports mapping multiple dimensions to the column channel
measures
Type: FunnelMeasure[] | undefined
Measures
For Funnel charts, all measures are automatically merged into one measure. When multiple measures exist, measure names are merged with the remaining dimensions and displayed as legend items.
Example [{id: 'value', alias: 'Value Proportion', format: 'percent'}]
id
Type: string
Measure ID, must be unique
alias
Type: string | undefined
Measure alias, duplicates allowed; when not set, alias defaults to id
autoFormat
Type: boolean | undefined
Automatic number formatting, enabled by default, highest priority.
When autoFormat=true, it overrides all numFormat configurations.
When enabled, chart data labels and tooltips will automatically select the appropriate formatting based on measure values and locale.
Formatting rules: decimal numbers with compact notation enabled, minimum 0 decimal places, maximum 2 decimal places, automatic rounding, using the browser's Intl.NumberFormat implementation.
For example:
-
locale=zh-CN: 749740.264 → 74.45万
-
locale=en-US: 749740.264 → 744.5K
numFormat
Type: NumFormat | undefined
Custom number formatting for measures; automatically applied to labels and tooltips.
Note: To use custom formatting, you must explicitly set autoFormat=false; otherwise autoFormat will override this configuration.
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
Number format type, supports: number (decimal), percent (%), permille (‰), scientific notation
ratio
Type: number | undefined
Number format ratio, cannot be 0
Example - 100000 converts to 10万, ratio:10000, symbol:"万" - 100000 converts to 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
Number format symbol, e.g. %, ‰
Example - 100000 converts to 10万, ratio:10000, symbol:"万" - 100000 converts to 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
Thousands separator for number formatting
suffix
Type: string | undefined
Number format suffix
prefix
Type: string | undefined
Number format prefix
fractionDigits
Type: number | undefined
Decimal places for number formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than significantDigits.
Example - 1234.5678 converts to 1235, fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 converts to 1234.6, fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 converts to 1234.57, fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 converts to 1230.568, fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 converts to 1234.5678, fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 converts to 1234.56780, fractionDigits:5 (roundingMode:halfCeil)
significantDigits
Type: number | undefined
Significant digits for number formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than fractionDigits.
Example - 1234.5678 converts to 1000, significantDigits:1 - 1234.5678 converts to 1200, significantDigits:2 - 1234.5678 converts to 1230, significantDigits:3 - 1234.5678 converts to 1234, significantDigits:4 - 1234.5678 converts to 1234.6, significantDigits:5 (roundingMode:halfCeil) - 1234.5678 converts to 1234.57, significantDigits:6 (roundingMode:halfCeil) - 1234.5678 converts to 1234.568, significantDigits:7 (roundingMode:halfCeil) - 1234.5678 converts to 1234.5678, significantDigits:8 (roundingMode:halfCeil)
roundingPriority
Type: "morePrecision" | "lessPrecision" | undefined
Rounding priority for number formatting when both significantDigits and fractionDigits are set; uses the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingPriority.
Example - 1234.5678 converts to 1230, significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 converts to 1234.5678, significantDigits:3 (roundingPriority:morePrecision)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
Rounding mode for number formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingMode.
format
Type: NumFormat | undefined
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
Number format type, supports: number (decimal), percent (%), permille (‰), scientific notation
ratio
Type: number | undefined
Number format ratio, cannot be 0
Example - 100000 converts to 10万, ratio:10000, symbol:"万" - 100000 converts to 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
Number format symbol, e.g. %, ‰
Example - 100000 converts to 10万, ratio:10000, symbol:"万" - 100000 converts to 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
Thousands separator for number formatting
suffix
Type: string | undefined
Number format suffix
prefix
Type: string | undefined
Number format prefix
fractionDigits
Type: number | undefined
Decimal places for number formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than significantDigits.
Example - 1234.5678 converts to 1235, fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 converts to 1234.6, fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 converts to 1234.57, fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 converts to 1230.568, fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 converts to 1234.5678, fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 converts to 1234.56780, fractionDigits:5 (roundingMode:halfCeil)
significantDigits
Type: number | undefined
Significant digits for number formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than fractionDigits.
Example - 1234.5678 converts to 1000, significantDigits:1 - 1234.5678 converts to 1200, significantDigits:2 - 1234.5678 converts to 1230, significantDigits:3 - 1234.5678 converts to 1234, significantDigits:4 - 1234.5678 converts to 1234.6, significantDigits:5 (roundingMode:halfCeil) - 1234.5678 converts to 1234.57, significantDigits:6 (roundingMode:halfCeil) - 1234.5678 converts to 1234.568, significantDigits:7 (roundingMode:halfCeil) - 1234.5678 converts to 1234.5678, significantDigits:8 (roundingMode:halfCeil)
roundingPriority
Type: "morePrecision" | "lessPrecision" | undefined
Rounding priority for number formatting when both significantDigits and fractionDigits are set; uses the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingPriority.
Example - 1234.5678 converts to 1230, significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 converts to 1234.5678, significantDigits:3 (roundingPriority:morePrecision)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
Rounding mode for number formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingMode.
encoding
Type: "color" | "tooltip" | "label" | "size" | undefined
Channel to which the measure is mapped
- tooltip: measure mapped to the tooltip channel
- color: measure mapped to the color channel
- label: measure mapped to the label channel
- tooltip: measure mapped to the tooltip channel
parentId
Type: string | undefined
In a flat measure configuration, builds a tree-like measure structure. parentId points to the ID of the parent measure group, used for building the hierarchy.
There are two ways to configure the measure tree: Option 1 is directly configuring a measure tree with children; Option 2 is providing a flat measure list with parentId. These two methods cannot be used simultaneously.
page
Type: Page | undefined
Pagination configuration
field
Type: string
Pagination field; specifies the field name for pagination, must be a dimension.
currentValue
Type: string
Current pagination value; specifies the value used to determine the current page.
Example '2023-01-01'
backgroundColor
Type: BackgroundColor
Chart background color. Default is transparent. Can be a color string (e.g. 'red', 'blue'), or a hex, rgb, or rgba value (e.g. '#ff0000', 'rgba(255,0,0,0.5)').
color
Type: Color | undefined
Linear gradient color configuration, used to define the chart color scheme
colorScheme
Type: string[] | undefined
Discrete color scheme used to define the colors of different elements in the chart.
Example ['#FFCDD2,#F8BBD0,#E1BEE7,#D1C4E9,#C5CAE9,#BBDEFB,#B3E5FC,#B2EBF2,#B2DFDB,#C8E6C9,#DCEDC8,#F0F4C3,#FFF9C4,#FFECB3,#FFE0B2']
linearColorScheme
Type: string[] | undefined
Linear gradient color scheme used to define the colors of different elements in the chart.
Example ['#FFCDD2, #F8BBD0]
colorMapping
Type: Record<string, string> | undefined
Color mapping used to map data values to specific colors.
Example { 'profit': 'red', 'sales': 'blue', }
positiveColor
Type: string | undefined
Positive/negative color configuration; defines the color for positive values in the chart.
negativeColor
Type: string | undefined
Positive/negative color configuration; defines the color for negative values in the chart.
label
Type: Label | undefined
Label configuration for defining chart data labels, including their position, format, and style.
enable
Type: false | true
Whether label functionality is enabled.
wrap
Type: boolean | undefined
Whether labels wrap to the next line.
showValue
Type: boolean | undefined
Whether labels display measure values.
In multi-measure scenarios, there is no concern about conflicting values because all plot-related measures go through foldMeasures processing and are merged into one measure representing a single data point.
Note: Encoding labels have higher priority; this config does not affect encoding labels.
showValuePercent
Type: boolean | undefined
Whether labels display measure value percentages.
In multi-measure scenarios, there is no concern about conflicting values because all plot-related measures go through foldMeasures processing and are merged into one measure representing a single data point.
Note: Encoding labels have higher priority; this config does not affect encoding labels.
showDimension
Type: boolean | undefined
Whether labels display dimension names.
Displays all dimension labels.
Note: Encoding labels have higher priority; this config does not affect encoding labels.
autoFormat
Type: boolean | undefined
Whether label values are automatically formatted. When autoFormat is true, numFormat configuration is ignored.
numFormat
Type: NumFormat | undefined
Label value format configuration; merged with the format in measure, where measure's format has higher priority. numFormat priority is lower than autoFormat.
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
Number format type, supports: number (decimal), percent (%), permille (‰), scientific notation
ratio
Type: number | undefined
Number format ratio, cannot be 0
Example - 100000 converts to 10万, ratio:10000, symbol:"万" - 100000 converts to 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
Number format symbol, e.g. %, ‰
Example - 100000 converts to 10万, ratio:10000, symbol:"万" - 100000 converts to 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
Thousands separator for number formatting
suffix
Type: string | undefined
Number format suffix
prefix
Type: string | undefined
Number format prefix
fractionDigits
Type: number | undefined
Decimal places for number formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than significantDigits.
Example - 1234.5678 converts to 1235, fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 converts to 1234.6, fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 converts to 1234.57, fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 converts to 1230.568, fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 converts to 1234.5678, fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 converts to 1234.56780, fractionDigits:5 (roundingMode:halfCeil)
significantDigits
Type: number | undefined
Significant digits for number formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than fractionDigits.
Example - 1234.5678 converts to 1000, significantDigits:1 - 1234.5678 converts to 1200, significantDigits:2 - 1234.5678 converts to 1230, significantDigits:3 - 1234.5678 converts to 1234, significantDigits:4 - 1234.5678 converts to 1234.6, significantDigits:5 (roundingMode:halfCeil) - 1234.5678 converts to 1234.57, significantDigits:6 (roundingMode:halfCeil) - 1234.5678 converts to 1234.568, significantDigits:7 (roundingMode:halfCeil) - 1234.5678 converts to 1234.5678, significantDigits:8 (roundingMode:halfCeil)
roundingPriority
Type: "morePrecision" | "lessPrecision" | undefined
Rounding priority for number formatting when both significantDigits and fractionDigits are set; uses the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingPriority.
Example - 1234.5678 converts to 1230, significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 converts to 1234.5678, significantDigits:3 (roundingPriority:morePrecision)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
Rounding mode for number formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingMode.
labelFontSize
Type: number | undefined
Label font size.
labelFontWeight
Type: string | number | undefined
Label font weight.
labelBackgroundColor
Type: string | undefined
Label background color.
labelStroke
Type: string | undefined
Label stroke (outline) color.
labelColor
Type: string | undefined
Label font color.
labelColorSmartInvert
Type: boolean | undefined
Whether to automatically invert the label font color based on the sector color.
labelPosition
Type: "inside" | "outside" | undefined
Label position.
labelOverlap
Type: boolean | undefined
Whether the label overlap avoidance function is enabled.
selector
Type: Selector | Selectors | undefined
Label filtering; the default condition relationship between selectors is OR.
field
Type: string
Dimension field ID.
operator
Type: "in" | "not in" | undefined
Operator:
-
in: Select data items where the dimension field value is in the 'value' list.
-
not in: Select data items where the dimension field value is not in the 'value' list.
op
Type: "in" | "not in" | undefined
Operator:
-
in: Select data items where the dimension field value is in the 'value' list.
-
not in: Select data items where the dimension field value is not in the 'value' list.
Same as operator.
value
Type: string | number | (string | number)[]
Selective dimension values; supports arrays.
dynamicFilter
Type: ChartDynamicFilter | undefined
Dynamic filter (AI-generated code execution).
Implement complex data filtering logic via AI-generated JavaScript code.
Key capabilities:
-
Supports any complex data filtering conditions.
-
Uses built-in utility functions for data operations.
-
Executes safely in the browser environment (Web Worker sandbox).
Requirements: Supports only browser environments; Node.js environments will use the fallback.
Note: selector and dynamicFilter cannot be used simultaneously; dynamicFilter has higher priority.
Configuration for the chart dynamic filter.
Filter chart marks (columns, points, etc.) via AI-generated JavaScript code.
type
Type: "row-with-field"
description
Type: string | undefined
User's filtering requirement description (natural language).
Example "Highlight bars with sales > 1000"
"Highlight the bar with the highest profit rate in each region"
code
Type: string
AI-generated JavaScript filtering code.
-
Can only use built-in utility functions (access via _ or R).
-
Input parameter: data (array); each item includes a __row_index field representing the row number.
-
Must return an array of row index and field combinations: Array<{ __row_index: number, field: string }>.
-
__row_index represents the row number of the original data item, and field represents the field to be highlighted.
-
Prohibited: eval, Function, asynchronous operations, DOM API, network requests.
Example const filtered = _.filter(data, item => item.sales > 1000);
const grouped = _.groupBy(data, 'area');
const filtered = _.filter(data, item => {
fallback
Type: Selector | Selectors | undefined
Fallback plan when code execution fails or the environment is not supported.
field
Type: string
Dimension field ID.
operator
Type: "in" | "not in" | undefined
Operator:
-
in: Select data items where the dimension field value is in the 'value' list.
-
not in: Select data items where the dimension field value is not in the 'value' list.
op
Type: "in" | "not in" | undefined
Operator:
-
in: Select data items where the dimension field value is in the 'value' list.
-
not in: Select data items where the dimension field value is not in the 'value' list.
Same as operator.
value
Type: string | number | (string | number)[]
Selective dimension values; supports arrays.
result
Type: DynamicFilterExecutionResult<RowWithFieldRes> | undefined
Dynamic filter execution result (runtime field). Written during the prepare() phase; read-only at runtime.
success
Type: false | true
data
Type: T[] | undefined
error
Type: string | undefined
legend
Type: ColorLegend | undefined
Color legend configuration, used to define the chart legend, including legend position, format, style, and more.
position
Type: "left" | "leftTop" | "leftBottom" | "lt" | "lb" | "top" | "topLeft" | "topRight" | "tl" | "tr" | "right" | "rightTop" | "rightBottom" | "rt" | "rb" | "bottom" | "bottomLeft" | "bottomRight" | "bl" | "br" | undefined
Legend position.
Example position: 'rightTop'
enable
Type: boolean | undefined
Whether legend functionality is enabled.
Example enable: true
labelColor
Type: string | undefined
Legend font color.
labelFontColor
Type: string | undefined
Legend font color.
labelFontSize
Type: number | undefined
Legend font size.
Example labelFontSize: 10
labelFontWeight
Type: string | number | undefined
Legend font weight.
Example labelFontWeight: 400
railBackgroundColor
Type: string | undefined
handlerBorderColor
Type: string | undefined
tooltip
Type: Tooltip | undefined
Tooltip configuration, used to define the chart's tooltips, including position, format, and style.
enable
Type: false | true
Whether tooltip functionality is enabled.
brush
Type: Brush | undefined
Brush configuration, used to enable/disable region selection capabilities.
enable
Type: boolean | undefined
Whether region selection is enabled.
brushType
Type: "rect" | "x" | "y" | "polygon" | undefined
Brush type. Defines the selection box shape and direction:
-
rect: Rectangular selection, allows selecting in both X and Y directions. -
polygon: Polygon selection, allows drawing arbitrary shapes by clicking multiple points. -
x: Horizontal selection, restricts selection to the X-axis direction. -
y: Vertical selection, restricts selection to the Y-axis direction.
brushMode
Type: "single" | "multiple" | undefined
Selection mode, single or multiple. Defines the selection logic:
-
single: Single selection mode, only one selection box can exist at a time. -
multiple: Multiple selection mode, multiple selection boxes can exist simultaneously.
removeOnClick
Type: boolean | undefined
Whether to clear selection boxes after region selection ends.
inBrushStyle
Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined
Style for data within the selected region.
opacity
Type: number | undefined
Opacity for selected data points, range 0-1.
stroke
Type: string | undefined
Stroke color.
lineWidth
Type: number | undefined
Stroke width.
outOfBrushStyle
Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined
Style for data outside the selected region.
opacity
Type: number | undefined
Opacity for data points outside the selection, range 0-1.
stroke
Type: string | undefined
Stroke color.
lineWidth
Type: number | undefined
Stroke width.
theme
Type: Theme | undefined
Chart theme. Themes are lower-priority configurations containing general settings shared across all chart types and specific settings shared within a chart category.
Light and dark themes are built-in; users can define custom themes via the Builder.
Example 'dark'
'light'
'customThemeName'
length
Type: number
brand
Type: brand
locale
Type: "zh-CN" | "en-US" | "ja-JP" | "de-DE" | "id-ID" | "fr-FR" | "ko-KR" | "vi-VN" | undefined
Locale. Chart language configuration; supports 'zh-CN' and 'en-US'. Alternatively, call intl.setLocale('zh-CN') to set the language.