#Radar

Radar chart, suitable for comparative analysis of multidimensional data, showing the value distribution of each dimension through a multi-axis coordinate system.

Applicable scenarios:

- Compare overall performance across multiple dimensions.

- Evaluate multiple objects across multiple measures.

- Show multidimensional characteristics of categorical data.

Radar chart, showing multidimensional data comparisons through a multi-axis coordinate system.

Dataset

An aggregated dataset conforming to the TidyData specification, used to define the chart data source and structure. User input data does not need preprocessing; VSeed has powerful data reshaping capabilities and reshapes data automatically. Radar chart data is ultimately converted to two dimensions and one measure.

Dimensions

The first dimension of the radar chart is mapped to the angle axis. The remaining dimensions are merged with measure names (when multiple measures exist) and 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

Radar chart measures are automatically merged into one measure and mapped to the radius axis. When multiple measures exist, measure names are merged with the remaining dimensions and displayed as legend items.

Measure ID, must be unique

Measure alias, duplicates allowed; when not set, alias defaults to id

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

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

Number format type, supports: number (decimal), percent (%), permille (‰), scientific notation

Number format ratio, cannot be 0

Number format symbol, e.g. %, ‰

Thousands separator for number formatting

Number format suffix

Number format prefix

Decimal places for number formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than significantDigits

Significant digits for number formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than fractionDigits

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

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

Number format type, supports: number (decimal), percent (%), permille (‰), scientific notation

Number format ratio, cannot be 0

Number format symbol, e.g. %, ‰

Thousands separator for number formatting

Number format suffix

Number format prefix

Decimal places for number formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than significantDigits

Significant digits for number formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than fractionDigits

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

Rounding mode for number formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's 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 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

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

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

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 their position, format, and style.

Whether label functionality is enabled

Whether labels wrap to the next line

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

Whether labels display the percentage of measure values.

In multi-measure scenarios, there is no concern about conflicting values because all plot-related measures undergo 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.

Whether labels display dimension labels

Display all dimension labels

Note: encoding's label has higher priority; this config does not affect encoding's label

Whether label values are automatically formatted; when autoFormat is true, numFormat configuration is ignored

Label value format configuration; merged with the format in measure, where measure's format has higher priority. numFormat priority is lower than autoFormat

Number format type, supports: number (decimal), percent (%), permille (‰), scientific notation

Number format ratio, cannot be 0

Number format symbol, e.g. %, ‰

Thousands separator for number formatting

Number format suffix

Number format prefix

Decimal places for number formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than significantDigits

Significant digits for number formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than fractionDigits

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

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

Label font size

Label font weight

Label background color

Label stroke color

Label font color

Whether the label color is automatically inverted based on the element color

label position

Whether the label anti-overlap function is enabled

Label filtering; the default relationship between selectors is 'OR'

Dimension field, the ID of a dimension item

Operator

- in: Select data items where the value of the dimension field is in 'value'

- not in: Select data items where the value of the dimension field is not in 'value'

Operator

- in: Select data items where the value of the dimension field is in 'value'

- not in: Select data items where the value of the dimension field is not in 'value'

Same as operator

Select the value of the dimension field in the data item, supports arrays

Dynamic filter (AI-generated code execution)

Implement complex data filtering logic via AI-generated JavaScript code

Core capabilities:

• Supports any complex data filtering conditions

• Use built-in utility functions for data operations

• Execute safely in the browser environment (Web Worker sandbox)

Environment requirements: Only supports browser environment; Node.js environment will use fallback

Note: selector and dynamicFilter cannot be used simultaneously; dynamicFilter has higher priority

Chart dynamic filter configuration

Implement filtering of chart marks (bars, points, etc.) via AI-generated JavaScript code

User filtering requirement description (natural language)

AI-generated JavaScript filtering code

• Can only use built-in utility functions (accessed via _ or R)

• Input parameter: data (array), each item contains __row_index representing the row number

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

• __row_index represents the original data item row number, and field represents the field to highlight

• Forbidden: eval, Function, asynchronous operations, DOM API, 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 where the dimension field value is in value

• not in: selects data items where the dimension field value is not in value

Operator

• in: selects data items where the dimension field value is in value

• not in: selects data items where the dimension field value is not in value

same as operator

Selects the value of the dimension field in the data item; arrays are supported

Dynamic filter execution result (runtime field)

Written during prepare(); read-only at runtime

Legend

Legend configuration, used to define the chart's legend, including its position, format, style, etc.

Whether legend functionality is enabled

Whether legend border is enabled

Legend font color

Pager icon color

Pager icon disabled 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 columns displayed

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

Tooltip

Tooltip configuration, used to define the chart's tooltips, including its position, format, style, etc.

Whether tooltip functionality is enabled

Brush Selection

Brush configuration, used to enable/disable the brush selection capability.

Chart brush configuration

Whether to enable brush selection

Brush type

Define the shape and direction of the brush selection box

- rect: Rectangular selection, can pick in both X and Y directions simultaneously

- polygon: Polygon selection, pick an arbitrary polygon by clicking multiple points

- x: X-axis selection, only pick along the X-axis, no restriction on the Y-axis

- y: Y-axis selection, only pick along the Y-axis, no restriction on the X-axis

Selection mode: single or multiple

Define the picking mode

- single: Single selection mode, only one picking box at a time

- multiple: Multiple selection mode, multiple picking boxes can exist simultaneously

Whether to clear the selection box after picking ends

Style of selected data

Define the style of picked data points

Opacity

Opacity of selected data points, range 0-1

Stroke color

Stroke width

Style of unselected data

Define the style of unpicked data points

Opacity

Opacity of unselected data points, range 0-1

Stroke color

Stroke width

Animation configuration

Chart animation configuration, with available effects constrained by chart type.

Whether to enable radar chart animation

Radar chart animation parameters

Radar chart appear animation configuration

Radar chart appear effects, supporting radial and scale animations

Whether to enable the current animation stage

Animation easing function

Animation duration, in milliseconds

Animation highlight or atmosphere color

Radar chart update animation configuration

Radar chart update effects, supporting growth animation

Whether to enable the current animation stage

Animation easing function

Animation duration, in milliseconds

Animation highlight or atmosphere color

Radar chart loop animation configuration

Whether to enable loop animation

Loop animation interval, in milliseconds

Radar chart atmosphere animation configuration

Atmosphere animation easing function

Atmosphere animation color

Atmosphere animation effect, supporting ripple, fade, and breath effects

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; users can customize themes via Builder.

Theme

Built-in light and dark themes; new themes can be customized via registerTheme.

Point element style configuration, used to define the chart's point element styles, including color, border, etc.

Supports global style or conditional style configuration.

Data filter

If selector is configured, it provides four types of data matching capabilities: numerical selector, partial data selector, conditional dimension selector, and conditional measure selector.

If selector is not configured, the style applies globally.

Data selector

If selector is configured, it provides four types of data matching capabilities: numerical selector, partial data selector, conditional dimension selector, and conditional measure selector.

If selector is not configured, the style applies globally.

Dimension field, the ID of a dimension item

Operator

- in: Select data items where the value of the dimension field is in 'value'

- not in: Select data items where the value of the dimension field is not in 'value'

Operator

- in: Select data items where the value of the dimension field is in 'value'

- not in: Select data items where the value of the dimension field is not in 'value'

Same as operator

Select the value of the dimension field in the data item, supports arrays

Dynamic filter (AI-generated code execution)

Implement complex data filtering logic via AI-generated JavaScript code

Suitable for scenarios that are difficult to express with static selectors, such as Top N, statistical analysis, and complex conditions

Core capabilities:

• Supports any complex data filtering conditions

• Use built-in utility functions for data operations

• Execute safely in the browser environment (Web Worker sandbox)

Environment requirements: Only supports browser environment; Node.js environment will use fallback

Note: selector and dynamicFilter cannot be used simultaneously; dynamicFilter has higher priority

Chart dynamic filter configuration

Implement filtering of chart marks (bars, points, etc.) via AI-generated JavaScript code

User filtering requirement description (natural language)

AI-generated JavaScript filtering code

• Can only use built-in utility functions (accessed via _ or R)

• Input parameter: data (array), each item contains __row_index representing the row number

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

• __row_index represents the original data item row number, and field represents the field to highlight

• Forbidden: eval, Function, asynchronous operations, DOM API, 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 where the dimension field value is in value

• not in: selects data items where the dimension field value is not in value

Operator

• in: selects data items where the dimension field value is in value

• not in: selects data items where the dimension field value is not in value

same as operator

Selects the value of the dimension field in the data item; arrays are supported

Dynamic filter execution result (runtime field)

Written during prepare(); read-only at runtime

Whether the point is visible

Point size

Point size

Point element color

Point element color

Point element color opacity

Point element color opacity

Point element border color

Point element border color

Point element border width

Point element border width

Point element border style

Point element border style

Line element style configuration, used to define the chart's line element styles, including color, opacity, curve, etc.

Supports global style or conditional style configuration.

Data filter

If selector is configured, it provides four types of data matching capabilities: numerical selector, partial data selector, conditional dimension selector, and conditional measure selector.

If selector is not configured, the style applies globally.

Data selector

If selector is configured, it provides four types of data matching capabilities: numerical selector, partial data selector, conditional dimension selector, and conditional measure selector.

If selector is not configured, the style applies globally.

Dimension field, the ID of a dimension item

Operator

- in: Select data items where the value of the dimension field is in 'value'

- not in: Select data items where the value of the dimension field is not in 'value'

Operator

- in: Select data items where the value of the dimension field is in 'value'

- not in: Select data items where the value of the dimension field is not in 'value'

Same as operator

Select the value of the dimension field in the data item, supports arrays

Dynamic filter (AI-generated code execution)

Implement complex data filtering logic via AI-generated JavaScript code

Suitable for scenarios that are difficult to express with static selectors, such as Top N, statistical analysis, and complex conditions

Core capabilities:

• Supports any complex data filtering conditions

• Use built-in utility functions for data operations

• Execute safely in the browser environment (Web Worker sandbox)

Environment requirements: Only supports browser environment; Node.js environment will use fallback

Note: selector and dynamicFilter cannot be used simultaneously; dynamicFilter has higher priority

Chart dynamic filter configuration

Implement filtering of chart marks (bars, points, etc.) via AI-generated JavaScript code

User filtering requirement description (natural language)

AI-generated JavaScript filtering code

• Can only use built-in utility functions (accessed via _ or R)

• Input parameter: data (array), each item contains __row_index representing the row number

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

• __row_index represents the original data item row number, and field represents the field to highlight

• Forbidden: eval, Function, asynchronous operations, DOM API, 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 where the dimension field value is in value

• not in: selects data items where the dimension field value is not in value

Operator

• in: selects data items where the dimension field value is in value

• not in: selects data items where the dimension field value is not in value

same as operator

Selects the value of the dimension field in the data item; arrays are supported

Dynamic filter execution result (runtime field)

Written during prepare(); read-only at runtime

Whether the line segment is visible

Whether the line segment is smooth

Line segment color

Line segment color opacity

Line segment width

Line segment style

Area element style configuration, used to define the chart's area element styles, including color, opacity, border, etc.

Supports global style or conditional style configuration.

Data filter

If selector is configured, it provides four types of data matching capabilities: numerical selector, partial data selector, conditional dimension selector, and conditional measure selector.

If selector is not configured, the style applies globally.

Data selector

If selector is configured, it provides four types of data matching capabilities: numerical selector, partial data selector, conditional dimension selector, and conditional measure selector.

If selector is not configured, the style applies globally.

Dimension field, the ID of a dimension item

Operator

- in: Select data items where the value of the dimension field is in 'value'

- not in: Select data items where the value of the dimension field is not in 'value'

Operator

- in: Select data items where the value of the dimension field is in 'value'

- not in: Select data items where the value of the dimension field is not in 'value'

Same as operator

Select the value of the dimension field in the data item, supports arrays

Dynamic filter (AI-generated code execution)

Implement complex data filtering logic via AI-generated JavaScript code

Suitable for scenarios that are difficult to express with static selectors, such as Top N, statistical analysis, and complex conditions

Core capabilities:

• Supports any complex data filtering conditions

• Use built-in utility functions for data operations

• Execute safely in the browser environment (Web Worker sandbox)

Environment requirements: Only supports browser environment; Node.js environment will use fallback

Note: selector and dynamicFilter cannot be used simultaneously; dynamicFilter has higher priority

Chart dynamic filter configuration

Implement filtering of chart marks (bars, points, etc.) via AI-generated JavaScript code

User filtering requirement description (natural language)

AI-generated JavaScript filtering code

• Can only use built-in utility functions (accessed via _ or R)

• Input parameter: data (array), each item contains __row_index representing the row number

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

• __row_index represents the original data item row number, and field represents the field to highlight

• Forbidden: eval, Function, asynchronous operations, DOM API, 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 where the dimension field value is in value

• not in: selects data items where the dimension field value is not in value

Operator

• in: selects data items where the dimension field value is in value

• not in: selects data items where the dimension field value is not in value

same as operator

Selects the value of the dimension field in the data item; arrays are supported

Dynamic filter execution result (runtime field)

Written during prepare(); read-only at runtime

Whether the area element is visible

Whether the area element is visible

Area element color

Area element color

Area element color opacity

Area element color opacity

Language

Chart language configuration. Supports 'zh-CN' and 'en-US'. Additionally, the intl.setLocale('zh-CN') method can be called to set the language.