#RaceDonut

Animated 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.

Application Scenarios:

- Need to display both overall data and the share of each part over time.

- Emphasize the relationship between the whole and the parts.

- The center area needs to display key measures or titles.

Animated 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.

Animated Donut Chart, suitable for displaying the share of data over time.

Data source

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

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~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

- 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

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 time dimensions, the core configuration of Animated Donut Chart.

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

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

Playback interval, in ms.

Whether to auto-play.

Whether to loop playback.

Player position.

Player progress bar track color.

Player progress bar progress color.

Player progress bar slider color.

Player progress bar slider border color.

Player start button color.

Player pause button color.

Player backward button color.

Player forward button color.

Background color

Color configuration

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 configuration

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 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 the label automatically inverts font color based on primitive color

label position

Whether the label anti-overlap feature 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 dimension field value is in value

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

Operator

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

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

same as operator

Select data items where the dimension field value is one of the values in the array

Animated filter (AI-generated code execution)

Implement 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 browser environments (Web Worker sandbox)

Environment requirements: Only supports browser environments, fallback will be used in Node.js environments

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

Chart animated filter configuration

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

User's filtering requirement description (natural language)

AI-generated JavaScript filtering code

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

- Input parameters: data (array), each item contains __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

- Prohibited use: eval, Function, asynchronous operations, DOM API, network requests

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

Dimension field, the ID of a dimension item

Operator

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

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

Operator

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

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

same as operator

Select data items where the dimension field value is one of the values in the array

Animated filter execution result (runtime field)

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

Label layout mode, only effective for Pie and Donut charts when labelPosition is outside.

- arc: Layout labels along an arc.

- labelLine: Labels are aligned at both ends, connected to sector primitives via leader lines.

- edge: Labels are aligned at both ends, connected to sector primitives via leader lines, and placed close to the edges of the chart.

Legend configuration

Whether the legend feature is enabled

Whether the 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 legends.

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

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

Tooltip configuration

Whether the tooltip feature is enabled

Brush configuration

Chart brush configuration

Whether to enable brush selection

Brush type

Defines the shape and direction of the brush box.

- rect: Rectangular brush, allows simultaneous selection on both X and Y axes.

- polygon: Polygonal brush, allows selection by clicking multiple points to draw an arbitrary polygon.

- x: X-axis brush, selection only on the X-axis, no limit on the Y-axis.

- y: Y-axis brush, selection only on the Y-axis, no limit on the X-axis.

Brush mode, single or multiple selection.

Defines the brush mode.

- single: Single mode, only one brush box at a time.

- multiple: Multiple mode, multiple brush boxes can exist simultaneously.

Whether to clear the brush box after selection ends.

Style of selected data.

Defines the style of data points within the brush selection.

Opacity

Opacity of selected data points, range 0-1.

Stroke color

Stroke width

Style of unselected data.

Defines the style of data points outside the brush selection.

Opacity

Opacity of unselected data points, range 0-1.

Stroke color

Stroke width

Theme configuration

Theme

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

Locale configuration