#RaceBar

Race Bar Chart.

Suitable for showing how rankings change over time through animation.

Race Bar Chart. Suitable for showing how rankings change over time through animation.

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:

• player: supports mapping multiple dimensions to the player (animation) channel.

• yAxis: supports mapping multiple dimensions to the Y-axis.

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

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

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:

• xAxis: measure mapped to the X-axis.

• detail: measure mapped to the detail 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.

Player configuration. Used to specify the time dimension, which is the core configuration for Race Bar Charts.

Specifies the field name for playing (animating), which must be a dimension.

Maximum number of items to play; data exceeding this count will be truncated. Set to false for no limit.

Playback interval in milliseconds (ms).

Whether to start playback automatically.

Whether to loop playback.

Player position.

Color of the player's progress bar rail.

Color of the player's progress bar track.

Color of the player's progress bar slider handle.

Border color of the slider handle.

Color of the player's start button.

Color of the player's pause button.

Color of the player's backward button.

Color of the player's forward button.

Sort configuration. Race Bar Charts typically require animated sorting based on measure values.

Category axis sort configuration. Supports sorting by dimension or measure, as well as custom sort orders.

Sort order: 'asc' or 'desc'.

The field used for sorting; can be a dimension ID or a measure ID.

Custom sort order to be applied directly to the category axis.

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.

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 labels have higher priority; this config does not affect encoding labels.

Whether labels display measure value percentages.

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 labels have higher priority; this config does not affect encoding labels.

Whether labels display dimension names.

Displays all dimension labels.

Note: Encoding labels have higher priority; this config does not affect encoding labels.

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 (outline) color.

Label font color.

Whether to automatically invert the label font color based on the bar color.

Label position.

Whether the label overlap avoidance function is enabled.

Label filtering; the default condition relationship between selectors is OR.

Dimension field ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Same as operator.

Selective dimension values; supports arrays.

Dynamic filter (AI-generated code execution).

Implement complex data filtering logic via AI-generated JavaScript code.

Key capabilities:

• Supports any complex data filtering conditions.

• Uses built-in utility functions for data operations.

• Executes safely in the browser environment (Web Worker sandbox).

Requirements: Supports only browser environments; Node.js environments will use the fallback.

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

Configuration for the chart dynamic filter.

Filter chart marks (bars, points, etc.) via AI-generated JavaScript code.

User's filtering requirement description (natural language).

AI-generated JavaScript filtering code.

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

• Input parameter: data (array); each item includes 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 row number of the original data item, 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 ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Same as operator.

Selective dimension values; supports arrays.

Dynamic filter execution result (runtime field). Written during the prepare() phase; read-only at runtime.

Legend configuration.

Whether legend functionality is enabled.

Whether the legend border is enabled.

Legend font color.

Pagination icon color.

Pagination 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 many items exist.

If position is horizontal (bottom, top, etc.), maxSize controls the number of columns. If position is vertical (left, right, etc.), maxSize controls the number of rows.

Tooltip configuration.

Whether tooltip functionality is enabled.

Brush configuration.

Whether region selection is enabled.

Brush type. Defines the selection box shape and direction:

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

• polygon: Polygon selection, allows drawing arbitrary shapes by clicking multiple points.

• x: Horizontal selection, restricts selection to the X-axis direction.

• y: Vertical selection, restricts selection to the Y-axis direction.

Selection mode, single or multiple. Defines the selection logic:

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

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

Whether to clear selection boxes after region selection ends.

Style for data within the selected region.

Opacity for selected data points, range 0-1.

Stroke color.

Stroke width.

Style for data outside the selected region.

Opacity for data points outside the selection, range 0-1.

Stroke color.

Stroke width.

X-axis configuration. A numeric axis used for displaying measure values.

Whether the axis is visible.

Minimum value of the axis. Higher priority than nice and zero.

Maximum value of the axis. Higher priority than nice and zero. If true, the maximum value is automatically calculated based on the data range.

Whether to use a logarithmic axis. Only effective for numeric axes.

The base of the logarithm for a logarithmic axis. Only effective for numeric axes.

Whether to automatically adjust axis tick intervals for readability. Ignored if min and max are set. Only effective for numeric axes.

Whether the axis is reversed. Only effective for numeric axes.

Whether to force 0 to be displayed on the axis. Ignored if min and max are set. Only effective for numeric axes.

Whether to automatically format axis labels. Only effective for numeric axes. If true, numFormat is ignored.

Number formatting for the numeric axis. Lower priority 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.

X-axis tick labels.

Whether labels are visible.

Label color.

Label font size.

Label font weight.

Label rotation angle.

X-axis line.

Whether the axis line is visible.

Axis line color.

Axis line width.

X-axis ticks.

Whether ticks are visible.

Whether ticks point inwards.

Tick color.

Tick size.

X-axis title.

Whether the title is visible.

Title text. Defaults to field configuration.

Title color.

Title font size.

Title font weight.

X-axis grid lines.

Grid line color.

Grid line width.

Grid line dash pattern.

X-axis animation configuration.

Animation duration.

Animation easing function.

Y-axis configuration. A category axis for displaying dimension values, with vertical sorting of bars.

Whether the axis is visible.

Whether the axis is reversed. Only effective for numeric axes.

Whether to force 0 to be displayed on the axis. Ignored if min and max are set. Only effective for numeric axes.

Whether to automatically hide overlapping labels. Only effective for category axes.

The minimum gap between labels; labels are hidden if the gap is smaller than this value. Only effective for category axes.

Whether to automatically rotate labels when they exceed the axis length. Only effective for category axes.

The range of allowed rotation angles. Only effective for category axes.

Whether to automatically limit label length. Excess text is replaced with an ellipsis and shown on hover. Only effective for category axes.

The maximum length for axis labels. Excess text is replaced with an ellipsis and shown on hover. Only effective for category axes.

Y-axis tick labels.

Whether labels are visible.

Label color.

Label font size.

Label font weight.

Label rotation angle.

Y-axis line.

Whether the axis line is visible.

Axis line color.

Axis line width.

Y-axis ticks.

Whether ticks are visible.

Whether ticks point inwards.

Tick color.

Tick size.

Y-axis title.

Whether the title is visible.

Title text. Defaults to field configuration.

Title color.

Title font size.

Title font weight.

Y-axis grid lines.

Grid line color.

Grid line width.

Grid line dash pattern.

Y-axis animation configuration.

Animation duration.

Animation easing function.

Crosshair rectangle area configuration (for horizontal tooltips).

Whether to show the crosshair rectangle area.

Color of the crosshair rectangle area.

Color of the crosshair rectangle label.

Whether to show the crosshair rectangle label.

Background color of the crosshair rectangle label.

Stacking corner radius.

Maximum width (or height) of the bars.

Legend sort configuration. Supports sorting by dimension or measure, as well as custom sort orders. The sorting follows a left-to-right or top-to-bottom order.

Sort order: 'asc' or 'desc'.

The field used for sorting; can be a dimension ID or a measure ID.

Custom sort order for the legend; 'ascending' is left-to-right or top-to-bottom, 'descending' is right-to-left or bottom-to-top.

Theme. Light and dark themes are built-in; new themes can be added via registerTheme.

Bar chart styling configuration.

Data selector.

Provides four types of data matching: numeric selector, local data selector, conditional dimension selector, and conditional measure selector.

If not configured, the style applies globally.

Dimension field ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Same as operator.

Selective dimension values; supports arrays.

Dynamic filter (AI-generated code execution).

Implement complex data filtering logic via AI-generated JavaScript code. Suitable for scenarios where static selectors are insufficient (e.g., Top N, statistical analysis).

Key capabilities:

• Supports any complex data filtering conditions.

• Uses built-in utility functions for data operations.

• Executes safely in the browser environment (Web Worker sandbox).

Requirements: Supports only browser environments; Node.js environments will use the fallback.

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

Configuration for the chart dynamic filter.

Filter chart marks (bars, points, etc.) via AI-generated JavaScript code.

User's filtering requirement description (natural language).

AI-generated JavaScript filtering code.

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

• Input parameter: data (array); each item includes 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 row number of the original data item, 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 ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Same as operator.

Selective dimension values; supports arrays.

Dynamic filter execution result (runtime field). Written during the prepare() phase; read-only at runtime.

Whether the bar elements (rectangles) are visible.

Color of the bar elements.

Opacity of the bar elements' color.

Border color of the bar elements.

Border width of the bar elements.

Border style of the bar elements.

Border (stroke) opacity of the bar elements.

Corner radius of the bar elements.

Annotation point configuration.

Data point selector for annotations.

Dimension field ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Same as operator.

Selective dimension values; supports arrays.

Dynamic filter (AI-generated code execution).

Implement complex data filtering logic via AI-generated JavaScript code. Suitable for scenarios where static selectors are insufficient (e.g., Top N, statistical analysis).

Key capabilities:

• Supports any complex data filtering conditions.

• Uses built-in utility functions for data operations.

• Executes safely in the browser environment (Web Worker sandbox).

Requirements: Supports only browser environments; Node.js environments will use the fallback.

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

Configuration for the chart dynamic filter.

Filter chart marks (bars, points, etc.) via AI-generated JavaScript code.

User's filtering requirement description (natural language).

AI-generated JavaScript filtering code.

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

• Input parameter: data (array); each item includes 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 row number of the original data item, 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 ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Same as operator.

Selective dimension values; supports arrays.

Dynamic filter execution result (runtime field). Written during the prepare() phase; read-only at runtime.

Annotation text.

Text color.

Text font size.

Text font weight.

Text alignment. Recommended: 'right' ensuring text is on the left of the annotation point (visible within the chart).

• right: Text is on the left of the point; right edge aligns with the point.

• left: Text is on the right of the point; left edge aligns with the point.

• center: Text is centered on the point.

Vertical baseline. Recommended: 'top' ensuring text is at the bottom of the point (visible within the chart).

• top: Text is at the bottom; top edge aligns with the point.

• middle: Text is vertically centered on the point.

• bottom: Text is at the top; bottom edge aligns with the point.

Whether the text background is visible.

Background color.

Background border color.

Background border width.

Background corner radius.

Background padding.

Vertical offset in pixels for the entire annotation component.

• Positive: Moves downward (e.g., 10px).

• Negative: Moves upward (e.g., -10px).

Recommended for points at the top/bottom of the chart to ensure visibility.

Horizontal offset in pixels for the entire annotation component.

• Positive: Moves rightward (e.g., 10px).

• Negative: Moves leftward (e.g., -10px).

Recommended for points at the edges of the chart to ensure visibility.

Numeric annotation line (Vertical).

Fixed X-value for the vertical annotation line. Input dimension values (if category axis) or numeric values (if numeric axis).

Dynamic filter (AI-generated code execution). Dynamically calculate the value for the annotation line (e.g., average, maximum, quantiles) based on data. Requires browser environment (Web Worker).

User's filtering requirement description (natural language).

AI-generated JavaScript calculation code.

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

• Input parameter: data (array).

• Must return a single value: number | string.

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

Fallback value when code execution fails or the environment is not supported.

Dynamic filter execution result (runtime field). Written during the prepare() phase.

Annotation text.

Text position relative to the annotation line.

Text color.

Text font size.

Text font weight.

Text alignment. Recommended: 'right' ensuring text is on the left of the line.

• right: Text is on the left; right edge aligns with the (vertical) line.

• left: Text is on the right; left edge aligns with the (vertical) line.

• center: Text is centered on the (vertical) line.

Vertical baseline. Recommended: 'top' ensuring text visibility.

• top: Text is at the bottom; top edge aligns with the line endpoint.

• middle: Text is vertically centered on the line endpoint.

• bottom: Text is at the top; bottom edge aligns with the line endpoint.

Whether the line is visible.

Line color.

Line width.

Line style.

Whether the text background is visible.

Background color.

Background border color.

Background border width.

Background corner radius.

Background padding.

Dimension annotation line (Horizontal).

Fixed Y-value for the horizontal annotation line. Input dimension values (if category axis) or numeric values (if numeric axis).

Dynamic filter (AI-generated code execution). Dynamically calculate the value for the annotation line based on data. Requires browser environment (Web Worker).

User's filtering requirement description (natural language).

AI-generated JavaScript calculation code.

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

• Input parameter: data (array).

• Must return a single value: number | string.

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

Fallback value when code execution fails or the environment is not supported.

Dynamic filter execution result (runtime field). Written during the prepare() phase.

Annotation text.

Text position relative to the line.

Text color.

Text font size.

Text font weight.

Text alignment. Recommended: 'right' ensuring text is on the left of the line endpoints.

• right: Text is on the left; right edge aligns with the (horizontal) line endpoint.

• left: Text is on the right; left edge aligns with the (horizontal) line endpoint.

• center: Text is centered on the (horizontal) line endpoint.

Vertical baseline. Recommended: 'top' ensuring visibility.

• top: Text is at the bottom; top edge aligns with the (horizontal) line.

• middle: Text is vertically centered on the (horizontal) line.

• bottom: Text is at the top; bottom edge aligns with the (horizontal) line.

Whether the text background is visible.

Background color.

Background border color.

Background border width.

Background corner radius.

Background padding.

Whether the line is visible.

Line color.

Line width.

Line style.

Whether to split the main line into two segments (above/below the annotation value).

The primary color for segments exceeding the annotation value.

The primary color for segments below the annotation value.

Annotation area configuration.

Selects data points to define the marked area.

Dimension field ID.

Operator (in / not in).

Operator (in / not in). Same as operator.

Dimension values; supports arrays.

Annotation text.

Text position within the annotation area.

Text color.

Text font size.

Text font weight.

Text alignment. Recommended: 'center' for centered display.

• right: Right edge aligns with the area boundary.

• left: Left edge aligns with the area boundary.

• center: Centered within the area.

Vertical baseline. Recommended: 'top' for visibility at the bottom.

• top: Text is at the bottom; top edge aligns with the area.

• middle: Centered within the area.

• bottom: Text is at the top; bottom edge aligns with the area.

Whether the text background is visible.

Background color.

Background border color.

Background border width.

Background corner radius.

Background padding.

Color of the annotation area.

Opacity of the annotation area color.

Border color of the annotation area.

Border width of the annotation area.

Corner radius of the annotation area.

Dash pattern for the annotation area border.

Padding for the annotation area.

Dimension linkage configuration.

Whether to enable dimension linkage.

Whether to show tooltips for all linked dimension sub-charts.

Whether to show labels for the linked crosshairs.

Language configuration.