#RaceDonut

Dynamic donut chart (Race Donut Chart)

Suitable for displaying the proportion of data over time, with a blank area in the center to display summary information.

Applicable scenarios:

- Need to display both overall data and how each part's share changes over time

- Emphasize the relationship between the whole and the parts.

- The center area needs to display key metrics or titles

Dynamic donut chart:

- Angles map to measure values, color maps to dimension values.

- Supports controlling time dimensions through the player, using animation to show share changes.

- Compared to pie charts, the center area is left blank, making it visually lighter.

Dynamic donut chart, suitable for displaying proportional relationships in data over time

Data set

A TidyData-compliant, already aggregated dataset used to define the chart data source and structure. User input does not require extra processing; VSeed provides powerful data reshaping capabilities and reshapes data automatically. Donut chart data is ultimately converted to 1 dimension and 1 measure.

Dimensions

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

- player: supports mapping multiple dimensions to the player channel

Measures

All measures of a donut chart are automatically merged into one measure and mapped to the pie radius. 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 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:

• 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 :::

#parentId

Type: string | undefined

:::note{title=Description} 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.

Player configuration, used to specify the time dimension, the core configuration of the dynamic pie chart

Player configuration, used to specify the player field name, must be a dimension

Maximum playback count; data exceeding this count will be truncated, set to false for no limit

Playback interval, unit: ms

Whether to auto play

Whether to loop play

Player position

Player progress bar rail color

Player text font family

Player text font size

Player progress bar track color

Player progress bar slider handle color

Player progress bar slider handle border color

Player start button color

Player pause button color

Player backward button color

Player forward button color

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, asynchronous operations, DOM API, and 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

Chart theme. Theme is a lower-priority feature configuration, including common configuration shared by all chart types and chart-type-specific shared configuration

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