#Donut

Donut Chart, suitable for showing the proportional relationship of single dimension data, with a blank area in the center to display summary information.

Applicable scenarios:

• Need to show both overall data and the proportion of each part

• Emphasize the relationship between the whole and parts

• Central area needs to display key measures or titles

Donut Chart

Donut Chart, a Pie Chart variant with a blank area in the center.

Dataset

TidyData-compliant and already aggregated dataset used to define the chart's data source and structure. User-input datasets do not require manual processing as VSeed features powerful data reshaping capabilities and will automatically reshape the data. Donut Chart data will eventually be converted to 1 dimension and 1 measure.

Dimensions

All Donut Chart dimensions will be merged with measure names (when multiple measures exist) into 1 dimension, mapped to the Pie Chart's angle, 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

• 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

All measures in the Donut Chart are automatically merged into one measure and mapped to the Pie Chart's radius. When multiple measures exist, the measure names will be 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 → 749.7万

- locale=en-US: 749740.264 → 749.7K

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

• angle: measure mapped to the angle 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 measure values as a percentage.

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 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 labels automatically invert font color based on the graphical element's color

label position

Whether the label overlap avoidance function is enabled

Label filtering; the default relationship between selectors is OR

Dimension field; refers to the ID of a specific dimension item

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

same as operator

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

Dynamic filter (executed by AI-generated code)

Implement complex data filtering logic using 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).

Environment Requirements: Only supports browser environments; Node.js environments will use fallback.

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

Chart dynamic filter configuration

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

User's filtering requirement description (natural language)

AI-generated JavaScript filtering code

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

• Input parameters: data (array), where each item contains 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 original data item's row number, and field represents the field to be highlighted

• Prohibited: eval, Function, asynchronous operations, DOM API, network requests

Fallback plan when code execution fails or the environment is not supported

Dimension field; refers to the ID of a specific dimension item

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

same as operator

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

Dynamic filter execution result (runtime field)

Written during the prepare() phase; read-only at runtime

Label layout method, only effective for Pie Charts and Donut Charts when labelPosition is outside.

• arc: Arc-based layout.

• labelLine: Labels are aligned on both sides, connected to sectors via leader lines.

• edge: Labels are aligned on both sides, connected to sectors via leader lines, and placed close to chart edges.

Legend

Legend configuration, used to define the chart's legend, including 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 for the legend when there are many legend items

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

If the 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 position, format, style, etc.

Whether tooltip functionality is enabled

Brush

Brush configuration, used to enable/disable brush selection capabilities.

Chart brush configuration

Whether to enable brush selection

Brush type

Defines the shape and selection direction of the brush box

• rect: Rectangular selection, allows simultaneous selection in both X and Y directions

• polygon: Polygonal selection, allows for multi-point arbitrary polygon selection

• x: X-axis selection, selection is restricted to the X-axis direction, Y-axis is unrestricted

• y: Y-axis selection, selection is restricted to the Y-axis direction, X-axis is unrestricted

Brush mode, single or multiple selection

Defines the selection mode

• single: Single selection mode, only one brush box can exist at a time

• multiple: Multiple selection mode, multiple brush boxes can exist simultaneously

Whether to clear the selection box when brush ends

Style for selected data items

Defines the style of data points within the selected brush area

Opacity

Opacity of selected data points, range 0-1

Stroke color

Stroke width

Style for unselected data items

Defines the style of data points outside the selected brush area

Opacity

Opacity of unselected data points, range 0-1

Stroke color

Stroke width

Chart theme. Theme is a low-priority configuration functionality that includes common configurations shared by all chart types and those shared within a single chart type category.

Built-in 'light' and 'dark' themes are provided, and users can customize themes via Builder.

Theme

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

Locale

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