#RoseParallel

Grouped 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

Grouped rose chart

Grouped rose chart, displaying multi-dimensional data comparison relationships through a polar coordinate system

Dataset

An aggregated dataset that conforms to the TidyData specification, 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.

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.

Field ID corresponding to the dimension

Dimension alias

Dimension date format configuration

Time granularity, determines the date display precision

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

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.

Measure ID. Must be unique

Measure alias. Duplicates are allowed. If omitted, alias uses id

Automatic number formatting, enabled by default and with the highest priority

When autoFormat=true, it overrides all numFormat configurations

When enabled, chart labels and tooltips automatically choose an appropriate format based on measure values and locale

Formatting rules: decimal numbers with compact notation enabled, minimum 0 decimal places, maximum 2 decimal places, automatic rounding, implemented with the browser Intl.NumberFormat

For example:

- locale=zh-CN: 749740.264 → 74.45万

- locale=en-US: 749740.264 → 744.5K

Custom number formatting for measures, automatically applied to label and tooltip

Note: to use custom formatting, explicitly set autoFormat=false; otherwise autoFormat overrides this configuration

Number format type. Supports number (decimal), percent (%), permille (‰), and scientific notation

Number formatting ratio. Cannot be 0

Number formatting symbol, such as % or ‰

Thousands separator for number formatting

Number formatting suffix

Number formatting prefix

Fraction digits for number formatting, using minimumFractionDigits and maximumFractionDigits from browser Intl.NumberFormat. Lower priority than significantDigits

Significant digits for number formatting, using minimumSignificantDigits and maximumSignificantDigits from browser Intl.NumberFormat. Higher priority than fractionDigits

Rounding priority for number formatting when significantDigits and fractionDigits are both set, using browser Intl.NumberFormat with the same rules as Intl.NumberFormat roundingPriority

Rounding mode for number formatting, using browser Intl.NumberFormat with the same rules as Intl.NumberFormat roundingMode

Number format type. Supports number (decimal), percent (%), permille (‰), and scientific notation

Number formatting ratio. Cannot be 0

Number formatting symbol, such as % or ‰

Thousands separator for number formatting

Number formatting suffix

Number formatting prefix

Fraction digits for number formatting, using minimumFractionDigits and maximumFractionDigits from browser Intl.NumberFormat. Lower priority than significantDigits

Significant digits for number formatting, using minimumSignificantDigits and maximumSignificantDigits from browser Intl.NumberFormat. Higher priority than fractionDigits

Rounding priority for number formatting when significantDigits and fractionDigits are both set, using browser Intl.NumberFormat with the same rules as Intl.NumberFormat roundingPriority

Rounding mode for number formatting, using browser Intl.NumberFormat with the same rules as Intl.NumberFormat roundingMode

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

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.

Pagination configuration, used to specify the field name for pagination, which must be a dimension.

Pagination field; specifies the field name for pagination, must be a dimension.

Current pagination value; specifies the value used to determine the current page.

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 configuration for defining the chart's color scheme, including color lists, color mappings, and color gradients.

Discrete color scheme used to define the colors of different elements in the chart.

Linear gradient color scheme used to define the colors of different elements in the chart.

Color mapping used to map data values to specific colors.

Positive/negative color configuration; defines the color for positive values in the chart.

Positive/negative color configuration; defines the color for negative values in the chart.

Label

Label configuration for defining chart data labels, including position, format, and style.

Whether labels are enabled

Whether labels wrap

Whether labels display measure values

In multi-measure scenarios, there is no concern about conflicting values, because all drawing-related measures are processed by foldMeasures and merged into one measure representing one data point.

Note: encoding.label has higher priority; this configuration does not affect encoding.label

Whether labels display measure values as percentages

In multi-measure scenarios, there is no concern about conflicting values, because all drawing-related measures are processed by foldMeasures and merged into one measure representing one data point.

Note: encoding.label has higher priority; this configuration does not affect encoding.label

Whether labels display dimension labels

Displays all dimension labels

Note: encoding.label has higher priority; this configuration does not affect encoding.label

Whether label values are automatically formatted. When autoFormat is true, numFormat is ignored

Label value formatting configuration. It is merged with format in measure; format in measure has higher priority. numFormat has lower priority than autoFormat

Number format type. Supports number (decimal), percent (%), permille (‰), and scientific notation

Number formatting ratio. Cannot be 0

Number formatting symbol, such as % or ‰

Thousands separator for number formatting

Number formatting suffix

Number formatting prefix

Fraction digits for number formatting, using minimumFractionDigits and maximumFractionDigits from browser Intl.NumberFormat. Lower priority than significantDigits

Significant digits for number formatting, using minimumSignificantDigits and maximumSignificantDigits from browser Intl.NumberFormat. Higher priority than fractionDigits

Rounding priority for number formatting when significantDigits and fractionDigits are both set, using browser Intl.NumberFormat with the same rules as Intl.NumberFormat roundingPriority

Rounding mode for number formatting, using browser Intl.NumberFormat with the same rules as Intl.NumberFormat roundingMode

Label font size

Label font weight

Label background color

Label stroke color

Label font color

Whether label font color is automatically inverted according to mark color

Label position

Whether label anti-overlap is enabled

Label filter. By default, the condition relationship between selectors is OR

Dimension field, the id of an item in dimensions

Operator

- in: selects data items whose dimension field value is in value

- not in: selects data items whose dimension field value is not in value

Operator

- in: selects data items whose dimension field value is in value

- not in: selects data items whose dimension field value is not in value

Same as operator

Select values from the dimension field in data items. Arrays are supported

Dynamic filter (AI-generated code execution)

Implement complex data filtering logic through AI-generated JavaScript code

Core capabilities:

- Supports arbitrarily complex data filtering conditions

- Uses built-in utility functions for data operations

- Executes safely in the browser environment (Web Worker sandbox)

Environment requirement: only supported in browser environments; Node.js environments use fallback

Note: selector and dynamicFilter cannot be used at the same time. dynamicFilter has higher priority

Chart dynamic filter configuration

Uses AI-generated JavaScript code to filter chart marks (bars, points, etc.)

User filter requirement description (natural language)

AI-generated JavaScript filtering code

- Only built-in utility functions can be used (accessed through _ or R)

- Input parameter: data (array), where each item contains the __row_index field as the row number

- Must return an array of row-index and field combinations: Array<{ __row_index: number, field: string }>

- __row_index is the row number of the original data item, and field is the field to highlight

- Forbidden: eval, Function, async operations, DOM APIs, network requests

Fallback when code execution fails or the environment is unsupported

Dimension field, the id of an item in dimensions

Operator

- in: selects data items whose dimension field value is in value

- not in: selects data items whose dimension field value is not in value

Operator

- in: selects data items whose dimension field value is in value

- not in: selects data items whose dimension field value is not in value

Same as operator

Select values from the dimension field in data items. Arrays are supported

Dynamic filtering execution result (runtime field)

Written during prepare(); read-only at runtime

Label layout mode. Only effective for Pie Chart and Donut Chart when labelPosition is outside.

• arc: Layout labels along the arc.

• labelLine: Aligns labels at both ends, connecting sector graphics with labels via leader lines.

• edge: Aligns labels at both ends, connecting sector graphics with labels via leader lines, positioned close to the edges of the chart. :::

#legend

Type: Legend | undefined

:::note{title=Description} Legend

Legend configuration for defining the chart legend, including position, format, and style.

Whether legend is enabled

Whether legend border is enabled

Legend font color

Pager icon color

Disabled pager icon color

Legend font size

Legend font color

Legend font weight

Legend shape

Legend position

Maximum number of columns or rows when there are many legend items

If position is horizontal (bottom, bottomLeft, bottomRight, bl, br, top, topLeft, topRight, tl, tr), maxSize controls the number of displayed columns

If position is vertical (left, leftTop, leftBottom, lt, lb, right, rightTop, rightBottom, rt, rb), maxSize controls the number of displayed rows

Tooltip information

Tooltip configuration for defining chart tooltips, including position, format, and style.

Whether tooltip information is enabled

Brush selection

Brush configuration used to enable or disable brush selection.

Chart brush selection configuration

Whether brush selection is enabled

Brush type

Defines the shape and direction of the brush selection.

- rect: rectangular brush selection, selects in both X and Y directions

- polygon: polygon brush selection, draws an arbitrary polygon by clicking multiple points

- x: X-axis brush selection, selects only in the X direction without restricting the Y direction

- y: Y-axis brush selection, selects only in the Y direction without restricting the X direction

Brush mode, single or multiple selection

Defines the brush selection mode.

- single: single-selection mode; only one brush area can exist at a time

- multiple: multiple-selection mode; multiple brush areas can exist at the same time

Whether to clear the brush area after brush selection ends

Style for data inside the brush area

Defines the style of selected data points

Opacity

Opacity of selected data points, ranging from 0 to 1

Stroke color

Stroke width

Style for data outside the brush area

Defines the style of unselected data points

Opacity

Opacity of unselected data points, ranging from 0 to 1

Stroke color

Stroke width

Animation configuration

Chart animation configuration; available effects are constrained by chart type

Whether to enable pie/donut/rose chart animation

Pie/donut/rose chart animation parameters

Pie/donut/rose chart appear animation configuration

Pie/donut/rose chart appear effects, supporting radial and scale animations

Whether the current animation stage is enabled

Animation easing function

Animation duration, in milliseconds

Animation highlight or atmosphere color

Pie/donut/rose chart update animation configuration

Pie/donut/rose chart update effects, supporting radial animation

Whether the current animation stage is enabled

Animation easing function

Animation duration, in milliseconds

Animation highlight or atmosphere color

Pie/donut/rose chart loop animation configuration

Whether loop animation is enabled

Loop animation interval, in milliseconds

Pie/donut/rose chart loop animation configuration

Pie/donut/rose chart loop effects

Whether the current animation stage is enabled

Animation easing function

Animation duration, in milliseconds

Animation highlight or atmosphere color

Pie/donut/rose chart atmosphere animation configuration

Atmosphere animation easing function

Atmosphere animation color

Chart theme. Theme is a low-priority configuration that includes common settings shared across all chart types and specific settings for a single chart type.

Built-in light and dark themes are available. Users can customize themes through Builder

Theme

Built-in light and dark themes are available. New themes can be customized through registerTheme.

Language

Chart language configuration. Supports 'zh-CN' and 'en-US'. You can also call intl.setLocale('zh-CN') to set the language