#RaceScatter

AnimatedScatter Chart (Race Scatter Chart)

Used to display the distribution of data over time, representing the values of two measures through the position of data points.

Application Scenarios:

- Analyze the distribution characteristics of data in two-dimensional space and show its animated changes over time.

- Display the evolution of correlation between multiple variables over time.

- Observe the movement trajectory of data points in two-dimensional space.

AnimatedScatter Chart:

- Both X-axis and Y-axis are numeric axes (continuous data), supporting multiple measures mapping.

- Supports controlling time dimensions through a player to display data changes animatedly.

- Intuitively show animated changes in data through the change in data point positions.

AnimatedScatter Chart, used to display the distribution of data over time.

Data source, a dataset following the TidyData specification.

Dimensions, used to distinguish different data series and for legend display.

Field ID corresponding to the dimension

Dimension alias

Dimension date format configuration

Time granularity, determines the date display precision

The channel in a competition scatter chart 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, at least 2 measures are required to be mapped to the X-axis and Y-axis respectively.

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

- xAxis: measure mapped to the x-axis

- yAxis: measure mapped to the y-axis

- size: measure mapped to the size 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

Player configuration, used to specify the time dimension, which is the core configuration of the AnimatedScatter Chart.

Control the playback progress of the time dimension through the player to implement animated updates of data.

Player configuration, used to specify the field name for playback, which 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 autoplay.

Whether to loop playback.

Player position.

Player progress bar rail color.

Player progress bar track 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.

Sort configuration, used to control the sorting method of dimension values.

Category axis sort configuration; supports sorting by dimensions or measures, as well as custom sort orders.

Sort order; optional values are 'asc' or 'desc'.

The field the sort depends on, can be a dimension id or measure id.

Custom sort order; this order will be directly applied to the category axis.

Pagination configuration, used for scenarios with large data volumes.

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

The size of measures in the scatter chart, used to define the size or size range of data points.

- If the size range is a single number, e.g., 10, it indicates the size of data points is fixed at 10.

- If the size range is an array of length 2, e.g., [10, 40], it indicates the size range of data points is between 10 and 40.

- Mutually exclusive with sizeRange, lower priority than size.

The size range of measures in the scatter chart, used to define the size range of data points.

- If the size range is an array of length 2, e.g., [10, 40], it indicates the size range of data points is between 10 and 40.

- If the size range is a single number, e.g., 10, it indicates the size of data points is fixed at 10.

- Mutually exclusive with sizeRange, higher priority than size.

Color configuration, used to distinguish different dimensions or measures.

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, used to display data labels on data points.

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 label font color is automatically inverted based on the graphic element color.

label position

Whether label anti-overlap functionality is enabled.

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

Dimension field; ID of a specific dimension item.

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.

Value of the dimension field in the selected data items; supports arrays.

Animated filter (AI-generated code execution)

Implement complex data filtering logic via AI-generated JavaScript code

Core capabilities:

- Supports arbitrary complex data filtering conditions

- Use built-in utility functions for data manipulation

- Safely execute in browser environments (Web Worker sandbox)

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

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

Chart animated filter configuration

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

Description of the user's filtering requirements (natural language).

AI-generated JavaScript filtering code.

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

• Input parameter: 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 APIs, network requests.

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

Dimension field; ID of a specific dimension item.

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

Value of the dimension field in the selected data items; supports arrays.

Dynamic filter execution results (runtime fields).

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

Legend configuration.

Whether the legend function is enabled.

Whether the legend border is enabled.

Legend font color.

Pager icon color.

Pager icon disabled color.

Legend font size.

legendfontColor

Legend font weight.

Legend shape.

Legend position.

When there are a large number of legends, the maximum number of columns or rows.

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 configuration, used to display detailed information on mouse hover.

Whether the tooltip function is enabled.

Brush configuration, used to support brush selection interaction.

Chart brush configuration.

Whether to enable brush selection.

Define the shape and selection direction of the brush.

- rect: Rectangular selection, can select in both X-axis and Y-axis directions simultaneously.

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

- x: X-axis selection, select only in the X-axis direction, Y-axis is not restricted.

- y: Y-axis selection, select only in the Y-axis direction, X-axis is not restricted.

Brush mode, single or multiple selection

Define the selection mode.

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

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

Whether to clear the selection box when brushing ends.

Style of selected data

Define the style of selected data points.

Opacity

Opacity of selected data points, range 0-1.

Stroke color.

Stroke width.

Style of unselected data

Define the style of unselected data points.

Opacity

Opacity of unselected data points, range 0-1.

Stroke color.

Stroke width.

X-axis configuration; a numeric axis that displays the first measure value.

Whether the axis is visible.

The minimum value of the axis; has higher priority than 'nice' and 'zero'.

The maximum value of the axis; has higher priority than 'nice' and 'zero'. If set to 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 logarithmic axis; only effective for numeric axes.

Whether to automatically adjust axis intervals for better readability. This setting is ignored if 'min' and 'max' are configured. Only applicable to numeric axes.

Whether to display the axis in reverse; only effective for numeric axes.

Whether to force the display of the 0 value on the axis; when min and max are configured, this setting is ignored. Only effective for numeric axes.

Whether to automatically format numeric axis tick labels. If set to true, 'numFormat' configuration is ignored. Only applicable to numeric axes.

Number format for the numeric axis; only effective for numeric axes. 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 label.

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

Whether ticks are visible.

Whether ticks point inward.

Tick color.

Tick size.

X-axis title.

Whether the title is visible.

Title text; follows field configuration by default.

Title color.

Title font size.

Title font weight.

X-axis grid line.

Grid line color.

Grid line width.

Grid line type.

X-axis animation configuration.

Animation duration.

Animation easing function.

Y-axis configuration; a numeric axis that displays the second measure value.

Whether the axis is visible.

The minimum value of the axis; has higher priority than 'nice' and 'zero'.

The maximum value of the axis; has higher priority than 'nice' and 'zero'. If set to true, the maximum value is automatically calculated based on the data range.

Whether to use a log axis; only applicable to numeric axes.

The base of the log axis; only applicable to numeric axes.

Whether to automatically adjust axis intervals for better readability. This setting is ignored if 'min' and 'max' are configured. Only applicable to numeric axes.

Whether the axis is reversed; only applicable to numeric axes.

Whether to force the axis to include 0. This setting is ignored if 'min' and 'max' are configured. Only applicable to numeric axes.

Whether to automatically format numeric axis tick labels. If set to true, 'numFormat' configuration is ignored. Only applicable to numeric axes.

Numeric format for the numeric axis; only applicable to numeric axes. Has 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 label.

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

Whether ticks are visible.

Whether ticks point inward.

Tick color.

Tick size.

X-axis title.

Whether the title is visible.

Title text; follows field configuration by default.

Title color.

Title font size.

Title font weight.

X-axis grid line.

Grid line color.

Grid line width.

Grid line type.

X-axis animation configuration.

Animation duration.

Animation easing function.

Crosshair configuration used to display the precise position of data.

Crosshair configuration is a type of configuration used to display crosshair lines (prompt lines) on the chart.

Whether to display crosshair lines.

Crosshair line color.

Crosshair label color.

Whether to show crosshair labels.

Crosshair label background color.

Theme configuration.

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

Data point style configuration; can be a single style or an array, supporting global styles or conditional style configurations.

Data selector.

If a selector is configured, it provides four types of data matching capabilities: value selector, local data selector, conditional dimension selector, and conditional measure selector.

If no selector is configured, the style applies globally.

Dimension field; ID of a specific dimension item.

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.

Value of the dimension field in the selected data items, supports arrays.

Animated filter (AI-generated code execution)

:::note{title=Description} Dynamic filter (AI-generated code execution).

Dynamically calculates filtering logic via AI-generated JavaScript code.

Suitable for scenarios difficult to express with static selectors, such as Top N, statistical analysis, and complex multi-condition filters.

Only supports browser environments (requires Web Worker).

Description of the user's filtering requirements (natural language).

AI-generated JavaScript filtering code.

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

• Input parameter: 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 APIs, network requests.

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

Dimension field; ID of a specific dimension item.

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.

Value of the dimension field in the selected data items, supports arrays.

Animated filter execution results (runtime fields)

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

Whether points are visible.

Point size.

Point color.

Point color opacity.

Point border color.

Point border width.

Point border style.

Annotation point configuration, used to add markers on specific data points.

Selector for annotation points, used to select data points.

Dimension field; ID of a specific dimension item.

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.

Value of the dimension field in the selected data items, supports arrays.

Dynamic filter (AI-generated code execution).

Dynamically calculates filtering logic via AI-generated JavaScript code.

Suitable for scenarios difficult to express with static selectors, such as Top N, statistical analysis, and complex multi-condition filters.

Only supports browser environments (requires Web Worker).

Chart dynamic filter configuration.

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

Description of the user's filtering requirements (natural language).

AI-generated JavaScript filtering code.

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

• Input: 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 APIs, network requests.

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

Dimension field; ID of a specific dimension item.

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.

Value of the dimension field in the selected data items, supports arrays.

Dynamic filter execution results (runtime fields).

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

Annotation text.

Text color.

Text font size.

Text font weight.

Text alignment. Typically set to 'right' so text is displayed on the left side of the annotation point, ensuring it remains within the visible chart area.

It is recommended to set this to 'right' as it ensures the text appears on the left side of the point.

right: Text is on the left side of the point, with its right edge aligned to the point.

left: Text is on the right side of the point, with its left edge aligned to the point.

center: Text is centered on the point.

Text vertical alignment. Typically set to 'top' so text is displayed at the bottom of the annotation point, ensuring it remains within the visible chart area.

It is recommended to set this to 'top' as it ensures the text is fully displayed within the visible chart area.

top: Text is below the point, with its top edge aligned to the point.

middle: Text is centered vertically on the point.

bottom: Text is above the point, with its bottom edge aligned to the point.

Whether the background is visible.

Background color.

Background border color.

Background border width.

Background border radius.

Background padding.

Pixel offset distance of the annotation point in the Y direction. When the point is above the chart (large value), a positive offset is recommended; when it is below (small value), a negative offset is recommended.

A negative value shifts the entire component (text, background) upward.

A positive value shifts the entire component (text, background) downward.

Pixel offset distance of the annotation point in the X direction. When the point is on the left side (dimension axis start), a positive offset is recommended; when it is on the right side (dimension axis end), a negative offset is recommended.

A negative value shifts the entire component (text, background) leftward.

A positive value shifts the entire component (text, background) rightward.

Vertical annotation line used to mark specific X-axis values.

Fixed X-axis value for vertical annotation lines. Supports dimension values for category axes and numeric values for numeric axes.

Dynamic filter (AI-generated code execution).

Dynamically calculates annotation line values via AI-generated JavaScript code.

Suitable for determining positions based on data, such as mean, max, quantiles, business targets, etc.

Only supports browser environments (requires Web Worker).

Description of the user's filtering requirements (natural language).

AI-generated JavaScript filtering code.

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

• Input parameter: data (array)

• Must return a single numeric or string value: number | string

• Use case: Dynamic values needed for annotation lines (horizontal/vertical lines)

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

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

Dynamic filter execution results (runtime fields).

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

Annotation text.

Text position relative to the annotation line.

Text color.

Text font size.

Text font weight.

Text alignment. In most cases, this does not need to be set.

It is recommended to set this to 'right' to ensure the text is on the left side of the vertical line.

right: Text is on the left side of the vertical reference line, with the right edge aligned to the line.

left: Text is on the right side of the vertical reference line, with the left edge aligned to the line.

center: Text is at the center of the vertical reference line, with the center aligned to the line.

Text vertical alignment. Typically doesn't need to be set.

Recommended to set to 'top' to ensure the text is fully displayed within the chart area.

top: Text is at the bottom of the reference line, with the top edge aligned to the endpoint of the (vertical) annotation line.

middle: Text is at the center of the reference line, with the center aligned to the endpoint of the (vertical) annotation line.

bottom: Text is at the top of the reference line, with the bottom edge aligned to the endpoint of the (vertical) annotation line.

Whether the line is visible.

Line color.

Line width.

Line style.

Whether the background is visible.

Background color.

Background border color.

Background border width.

Background border radius.

Background padding.

Horizontal annotation line used to mark specific Y-axis values.

Fixed Y-axis value for horizontal annotation lines. Supports dimension values for category axes and numeric values for numeric axes.

Animated filter (AI-generated code execution)

Animated calculation of annotation line values via AI-generated JavaScript code.

Suitable for cases where annotation line positions need to be determined dynamically based on data, such as mean, maximum, quantiles, business targets, etc.

Only supports browser environments (requires Web Worker).

Description of the user's filtering requirements (natural language).

AI-generated JavaScript filtering code.

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

• Input parameter: data (array)

• Must return a single numeric or string value: number | string

• Use case: Dynamic values needed for annotation lines (horizontal/vertical lines)

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

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

Dynamic filter execution results (runtime fields).

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

Annotation text.

Text position relative to the annotation line.

Text color.

Text font size.

Text font weight.

Text alignment. In most cases, this does not need to be set.

It is recommended to set this to 'right' to ensure the text is on the left side of the horizontal line endpoint.

right: Text is on the left side of the horizontal reference line, with the right edge aligned to the endpoint.

left: Text is on the right side of the horizontal reference line, with the left edge aligned to the endpoint.

center: Text is at the center of the horizontal reference line, with the center aligned to the endpoint.

Text vertical alignment. In most cases, this is set to 'top' so the text appears at the bottom of the annotation area and remains within the chart's visible region.

Recommended to set to 'top' to ensure the text is fully displayed within the chart area.

top: Text is at the bottom of the annotation area, with the top edge aligned to the area boundary.

middle: Text is at the center of the annotation area, with the center aligned to the area boundary.

bottom: Text is at the top of the annotation area, with the bottom edge aligned to the area boundary.

Whether the background is visible.

Background color.

Background border color.

Background border width.

Background border radius.

Background padding.

Whether the line is visible.

Line color.

Line width.

Line style.

Whether to enable the feature of splitting the main line into two segments.

The primary color for segments greater than the annotation value.

The primary color for segments less than the annotation value.

Annotation area configuration, used to highlight specific data ranges.

Data markers based on selected data.

Dimension field; ID of a specific dimension item.

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.

Value of the dimension field in the selected data items; supports arrays.

Annotation text.

Text position.

Text color.

Text font size.

Text font weight.

Text alignment. In most cases, this is set to 'right' so the text appears in the middle of the annotation area and remains within the chart's visible region.

Recommended to set to 'center' to ensure the text is in the middle of the annotation area.

right: Text is on the left side of the annotation area, with the right edge aligned to the area boundary.

left: Text is on the right side of the annotation area, with the left edge aligned to the area boundary.

center: Text is at the center of the annotation area, with the center aligned to the area boundary.

Text vertical alignment. In most cases, this is set to 'top' so the text appears at the bottom of the annotation area and remains within the chart's visible region.

Recommended to set to 'top' to ensure the text is fully displayed within the chart area.

top: Text is at the bottom of the annotation area, with the top edge aligned to the area boundary.

middle: Text is at the center of the annotation area, with the center aligned to the area boundary.

bottom: Text is at the top of the annotation area, with the bottom edge aligned to the area boundary.

Whether the background is visible.

Background color.

Background border color.

Background border width.

Background border radius.

Background padding.

Annotation area color.

Annotation area color opacity.

Annotation area border color.

Annotation area border width.

Annotation area border radius.

Line type for the annotation area border.

Padding for the annotation area.

Locale configuration.