RoseParallel
- Recommended field configuration: 1 measure(s), 1 dimension(s)
- Supports Data Reshape: at least1 measure(s), 0 dimension(s)
Group Rose Chart supports the following visual channels:
angle : angle channel, supportsmultiple dimensions, maps dimension values to the angular axis
radius : radius channel, supportsmultiple measures, maps measure values to the radius axis
detail : detail channel, supportsmultiple dimensions, used to display more granular data within the same color series
color : color channel, supportsmultiple dimensionsor one measure, dimension colors are used to distinguish different data series, measure colors are used for linearly mapping measure values to graphical colors
tooltip: tooltip channel, supportsmultiple dimensions and multiple measures, displayed when hovering over a data point
label : label channel, supportsmultiple dimensions and multiple measures, displays data labels on data points
Group Rose Chart, suitable for multi-dimensional data comparison scenarios, displaying data size through the arc length and radius of sectors in a polar coordinate system
Applicable scenarios:
- Distribution comparison of multi-dimensional data
- Comparison of strength in periodic data
- Concurrent display of numerical values and proportions for categorical data
Data requirements:
- At least 1 numerical field
- The first dimension is placed on the angular axis; other dimensions are merged with measure names (when multiple measures exist) to be displayed as legend items
- All measures are automatically merged into one measure
Features enabled by default:
- Legend, polar coordinate system, data labels, tooltips, and numerical scaling are enabled by default
chartType
Type: "roseParallel"
Group Rose Chart
Group Rose Chart, displaying multi-dimensional data comparison relationships through a polar coordinate system
Example 'roseParallel'
dataset
Type: Record[]
Dataset
An aggregated dataset that follows TidyData specifications, used to define the chart's data source and structure. User-input datasets do not require any manual processing; VSeed features a powerful data reshaping function that automatically transforms the data. Rose Chart data is eventually converted into 2 dimensions and 1 measure.
Example [{month:'Jan', value:100}, {month:'Feb', value:150}, {month:'Mar', value:120}]
dimensions
Type: RadarDimension[] | undefined
Dimensions
The first dimension of the Rose Chart is mapped to the angular axis; other dimensions are merged with measure names (when multiple measures exist) to be 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" | "angle" | undefined
Channel to which the dimension is mapped
- angle: supports mapping multiple dimensions to the angle channel
- 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: RadarMeasure[] | undefined
Measures
Measures in the Rose Chart are automatically merged into one measure and mapped to the radius axis. When multiple measures exist, measure names are merged with other dimensions to be displayed as legend items.
Example [{id: 'value', alias: 'Value'}]
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 config
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 10W, ratio:10000, symbol:"W" - 100000 converts to 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
Number format symbol, e.g. %, ‰
Example - 100000 converts to 10W, ratio:10000, symbol:"W" - 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 10W, ratio:10000, symbol:"W" - 100000 converts to 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
Number format symbol, e.g. %, ‰
Example - 100000 converts to 10W, ratio:10000, symbol:"W" - 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" | "radius" | undefined
Channel to which the measure is mapped
- radius: measure mapped to the radius 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 flat measure configuration form, builds a tree-shaped measure group. parentId points to the id of the parent measure group, used for building the measure tree
There are two ways to configure the measure tree: Option 1 is directly configuring a measure tree with children; Option 2 is configuring a flat measure list with parentId. These two methods cannot be used simultaneously
page
Type: Page | undefined
Pagination configuration, used to specify the field name for pagination; must be a dimension
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
Background color 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
Color
Color configuration for defining the chart's color scheme, including color lists, color mappings, and color gradients.
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: PieLabel | undefined
Label
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's label has higher priority; this config does not affect encoding's label
showValuePercent
Type: boolean | undefined
Whether labels display the percentage of 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's label has higher priority; this config does not affect encoding's label
showDimension
Type: boolean | undefined
Whether labels display dimension labels
Display all dimension labels
Note: encoding's label has higher priority; this config does not affect encoding's label
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 10W, ratio:10000, symbol:"W" - 100000 converts to 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
Number format symbol, e.g. %, ‰
Example - 100000 converts to 10W, ratio:10000, symbol:"W" - 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 color
labelColor
Type: string | undefined
Label font color
labelColorSmartInvert
Type: boolean | undefined
Whether the label font color automatically inverts based on the graphical element color
labelPosition
Type: "inside" | "outside" | undefined
label position
labelOverlap
Type: boolean | undefined
Whether the label anti-overlap function is enabled
selector
Type: Selector | Selectors | undefined
Label filtering; the default relationship between selectors is OR
field
Type: string
Dimension field; ID of a specific dimension item
operator
Type: "in" | "not in" | undefined
Operator
- in: Select data items whose dimension field value is within the specified value
- not in: Select data items whose dimension field value is not within the specified value
op
Type: "in" | "not in" | undefined
Operator
- in: Select data items whose dimension field value is within the specified value
- not in: Select data items whose dimension field value is not within the specified value
same as operator
value
Type: string | number | (string | number)[]
Select dimension field values; supports arrays
dynamicFilter
Type: ChartDynamicFilter | undefined
Dynamic filter (AI-generated code execution)
Implements complex data filtering logic via AI-generated JavaScript code
Core capabilities:
- Supports arbitrarily complex data filtering conditions
- Use built-in utility functions for data manipulation
- Secure execution in the browser environment (Web Worker sandbox)
Environmental requirements: Supports browser environments only; Node.js environments will use fallback
Note: selector and dynamicFilter cannot be used simultaneously; dynamicFilter has higher priority
Chart dynamic filter configuration
Implements filtering of chart marks (bars, 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 columns with sales greater than 1000"
"Highlight the column with the highest profit margin in each area"
code
Type: string
AI-generated JavaScript filtering code
- Only built-in utility functions can be used (accessed via _ or R)
- Input parameters: data (array), where 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; field represents the field to be highlighted
- Forbidden: eval, Function, asynchronous operations, DOM API, network requests
Example Highlight the sales field of data items with sales greater than 1000
Highlight data items with the highest profit margin in each area
Highlight data items filtered by multiple conditions
fallback
Type: Selector | Selectors | undefined
Fallback plan when code execution fails or the environment is not supported
field
Type: string
Dimension field; ID of a specific dimension item
operator
Type: "in" | "not in" | undefined
Operator
- in: Select data items whose dimension field value is within the specified value
- not in: Select data items whose dimension field value is not within the specified value
op
Type: "in" | "not in" | undefined
Operator
- in: Select data items whose dimension field value is within the specified value
- not in: Select data items whose dimension field value is not within the specified value
same as operator
value
Type: string | number | (string | number)[]
Select dimension field 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
labelLayout
Type: "arc" | "labelLine" | "edge" | undefined
Label layout mode; only effective for Pie and Donut charts when labelPosition is set to outside
- arc: Layout labels along the arc
- labelLine: Labels are aligned at both ends, connected to sector segments via leader lines
- edge: Labels are aligned at both ends, connected to sector segments via leader lines, and positioned close to the edges of the chart
legend
Type: Legend | undefined
legend
Legend configuration, used to define the chart's legend, including its position, format, style, etc.
enable
Type: boolean | undefined
Whether the legend function is enabled
Example enable: true
border
Type: boolean | undefined
Whether the legend border is enabled
Only effective for discrete legends
Example border: true
labelColor
Type: string | undefined
legendfontColor
pagerIconColor
Type: string | undefined
Pagination icon color
pagerIconDisableColor
Type: string | undefined
Pagination icon disabled color
labelFontSize
Type: number | undefined
Legend font size
Example labelFontSize: 10
labelFontColor
Type: string | undefined
legendfontColor
labelFontWeight
Type: string | number | undefined
Legend font weight
Example labelFontWeight: 400
shapeType
Type: "circle" | "cross" | "diamond" | "square" | "arrow" | "arrow2Left" | "arrow2Right" | "wedge" | "thinTriangle" | "triangle" | "triangleUp" | "triangleDown" | "triangleRight" | "triangleLeft" | "stroke" | "star" | "wye" | "rect" | "arrowLeft" | "arrowRight" | "rectRound" | "roundLine" | undefined
Legend shape
Only effective for discrete legends
Example shapeType: 'circle'
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'
maxSize
Type: number | undefined
Maximum number of columns or rows for the legend when many items are present
If the position is horizontal (bottom, top, etc.), maxSize controls the number of columns displayed
If the position is vertical (left, right, etc.), maxSize controls the number of rows displayed
Only effective for discrete legends
Example maxSize: 2
tooltip
Type: Tooltip | undefined
tooltips
Tooltip configuration, used to define the chart's tooltips, including their position, format, style, etc.
enable
Type: false | true
Whether tooltips are enabled
brush
Type: Brush | undefined
Brush
Brush configuration, used to enable/disable brush selection capabilities
Chart brush configuration
enable
Type: boolean | undefined
Whether to enable brush selection
brushType
Type: "rect" | "x" | "y" | "polygon" | undefined
Brush type
Defines the shape and direction of the brush selection
- rect: Rectangular selection, allowing selection in both X and Y axis directions simultaneously
- polygon: Polygonal selection, allowing selection by drawing an arbitrary polygon through multiple points
- x: X-axis selection, restricting selection to the X-axis direction while the Y-axis remains unconstrained
- y: Y-axis selection, restricting selection to the Y-axis direction while the X-axis remains unconstrained
brushMode
Type: "single" | "multiple" | undefined
Brush mode; single or multiple selection
Defines the brush mode
- single: Single mode, where only one brush selection can exist at a time
- multiple: Multiple mode, where multiple brush selections can coexist simultaneously
removeOnClick
Type: boolean | undefined
Whether to clear the selection once dragging ends
inBrushStyle
Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined
Style for selected data
Defines the style for selected data items
opacity
Type: number | undefined
Opacity
Opacity of selected data items, 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 unselected data
Defines the style for data items outside the selection
opacity
Type: number | undefined
Opacity
Opacity of unselected data items, range: 0-1
stroke
Type: string | undefined
Stroke color
lineWidth
Type: number | undefined
Stroke width
theme
Type: Theme | undefined
Chart theme; themes have lower priority and include common configurations shared across all chart types, as well as specific configurations for individual chart categories
Built-in light and dark themes; users can define custom themes via the Builder
Theme
Built-in light and dark themes; new themes can be customized via registerTheme.
Example 'dark'
'light'
'customThemeName'
length
Type: number
brand
Type: brand
locale
Type: Locale | undefined
Language
Chart language configuration; supports 'zh-CN' and 'en-US'. Additionally, the intl.setLocale('zh-CN') method can be called to specify the language.