#RaceLine

AnimatedLine Chart (Race Line Chart)

Suitable for showing data trends over time, connecting data points with line segments to form trend lines.

Applicable scenarios:

- Display trend changes of multiple data series over time

- Compare growth or decline patterns of different categories

- Observe data fluctuations on the time dimension

AnimatedLine Chart:

- X-axis is usually a time axis or category axis, showing dimension values

- Y-axis is a numeric axis, showing measure values

- Supports controlling the time dimension through a player, animating the extension process of the line

AnimatedLine Chart, suitable for showing data trends 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

- xAxis: supports mapping multiple dimensions to the x-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 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

- yAxis: measure mapped to the y-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 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 the time dimension, a core configuration of the animated line chart.

Used to specify the play field name, which must be a dimension.

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

Play interval, unit in ms.

Whether to auto-play.

Whether to loop play.

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 the element color

Label position

Whether the label anti-overlap function is enabled

Label filtering, default condition relationship between selectors is OR

Dimension field, ID of an item in dimensions

Operator

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

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

Operator

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

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

Same as operator

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

Animated filter (AI-generated code execution)

Implementation of complex data filtering logic through AI-generated JavaScript code

Core capabilities:

- Supports any complex data filtering conditions

- Use built-in utility functions for data manipulation

- Safe execution in the browser environment (Web Worker sandbox)

Environment requirement: Only supports browser environment, Node.js environment will use fallback

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

Chart animated filter configuration

Filter chart markers (bars, points, etc.) through AI-generated JavaScript code

Description of the user's filtering needs (natural language)

AI-generated JavaScript filtering code

- Only built-in utility functions can be used (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, field represents the field to be highlighted

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

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

Dimension field, ID of an item in dimensions

Operator

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

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

Operator

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

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

Same as operator

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

Animated filter execution result (runtime field)

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

Legend font color

Legend font weight

Legend shape

Legend position

When there are a large number of legends, specify the maximum number of columns or legend 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

Whether the tooltip function 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 selection, can be performed on both X and Y axes simultaneously.

- polygon: Polygon selection, click multiple points to draw an arbitrary polygon for selection.

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

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

Selection mode, single or multiple choices.

Defines the selection mode.

- 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 the selection box after selection ends.

Style of selected data

Defines the style of selected data points.

Opacity

Opacity of selected data points, range 0-1.

Stroke color

Stroke width

Style of unselected data

Defines the style of unselected data points.

Opacity

Opacity of unselected data points, range 0-1.

Stroke color

Stroke width

X-axis configuration, a category axis, showing dimension values.

Whether the axis is visible

Whether the axis is displayed in reverse, only effective for numeric axes.

Whether to force display of 0 on the axes. When min and max are configured, this configuration item becomes invalid. Only effective for numeric axes.

Axis label, automatic hiding. If two labels overlap (interval less than autoHideGap), the label causing overlap will be automatically hidden. Only effective for category axes.

Axis label, automatic hiding interval. If two labels overlap (interval less than autoHideGap), the label causing overlap will be automatically hidden. Only effective for category axes.

When autoHide is on, use autoHide, configured on autoHideSeparation.

When autoHide is off, use sampling, configured on minGap.

Axis label, automatic rotation. When the label width exceeds the axis length, the label is automatically rotated. Only effective for category axes.

Axis label, automatic rotation angle range. When automatic rotation is enabled, specify the label rotation angle range. Only effective for category axes.

Axis label, automatic length limit. When the label width exceeds the axis length, the excess is shown as an ellipsis, and the full label is visible on hover. Only effective for category axes.

Axis label, maximum length for automatic length limit. When the label text length exceeds the maximum length, the excess is shown as an ellipsis, and the full label is visible on hover. Only effective for category axes.

X-axis tick label

Whether the label is 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 the tick is visible

Whether the tick is oriented inwards

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, showing 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 logarithmic axis, only effective for numeric axes.

Whether to automatically adjust the axis ticks to make labels more readable. When min and max are configured, this configuration item becomes invalid. Only effective for numeric axes.

Whether the axis is displayed in reverse, only effective for numeric axes.

Whether to force display of 0 on the axes. When min and max are configured, this configuration item becomes invalid. Only effective for numeric axes.

Whether to automatically format the tick labels of the numeric axis. Only effective for numeric axes. When autoFormat is true, numFormat configuration is ignored.

Number formatting for 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 the label is 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 the tick is visible

Whether the tick is oriented inwards

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

Y-axis animation configuration

Animation duration

Animation easing function

Vertical crosshair line configuration

Crosshair line configuration, a configuration type used to display crosshair lines (prompt lines) in a chart.

Whether to display the crosshair line

Crosshair line color

Crosshair line label color

Whether to display the crosshair line label

Crosshair line label background color

X-axis sort configuration

Category axis sort configuration, supports sorting based on dimensions or measures, and custom sort order.

Sort order, optional values are 'asc' or 'desc'

Sort field dependencies, can be dimension ID or measure ID.

Custom sort order, applied directly to the category axis.

Legend sort configuration

Legend sort configuration, supports sorting based on dimensions or measures, and custom sort order; the sort array follows a left-to-right or top-to-bottom order.

Sort order, optional values are 'asc' or 'desc'

Sort field dependencies, can be dimension ID or measure ID.

Custom sort order, applied directly to the legend; ascending from left to right or top to bottom, descending from right to left or bottom to top.

Theme configuration

Theme

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

Point element style configuration

Data selector

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

If selector is not configured, the style takes effect globally.

Dimension field, ID of an item in dimensions

Operator

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

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

Operator

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

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

Same as operator

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

Animated filter (AI-generated code execution)

Implementation of complex data filtering logic through AI-generated JavaScript code. Suitable for scenarios difficult to express with static selectors, such as Top N, statistical analysis, and complex conditions.

Core capabilities:

- Supports any complex data filtering conditions

- Use built-in utility functions for data manipulation

- Safe execution in the browser environment (Web Worker sandbox)

Environment requirement: Only supports browser environment, Node.js environment will use fallback

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

Chart animated filter configuration

Filter chart markers (bars, points, etc.) through AI-generated JavaScript code

Description of the user's filtering needs (natural language)

AI-generated JavaScript filtering code

- Only built-in utility functions can be used (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, field represents the field to be highlighted

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

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

Dimension field, ID of an item in dimensions

Operator

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

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

Operator

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

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

Same as operator

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

Animated filter execution result (runtime field)

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

Whether points are visible

Point size

Point size

Point element color

Point element color

Point element color opacity

Point element color opacity

Point element border color

Point element border color

Point element border width

Point element border width

Point element border style

Point element border style

Line element style configuration

Data selector

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

If selector is not configured, the style takes effect globally.

Dimension field, ID of an item in dimensions

Operator

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

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

Operator

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

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

Same as operator

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

Animated filter (AI-generated code execution)

Implementation of complex data filtering logic through AI-generated JavaScript code. Suitable for scenarios difficult to express with static selectors, such as Top N, statistical analysis, and complex conditions.

Core capabilities:

- Supports any complex data filtering conditions

- Use built-in utility functions for data manipulation

- Safe execution in the browser environment (Web Worker sandbox)

Environment requirement: Only supports browser environment, Node.js environment will use fallback

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

Chart animated filter configuration

Filter chart markers (bars, points, etc.) through AI-generated JavaScript code

Description of the user's filtering needs (natural language)

AI-generated JavaScript filtering code

- Only built-in utility functions can be used (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, field represents the field to be highlighted

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

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

Dimension field, ID of an item in dimensions

Operator

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

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

Operator

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

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

Same as operator

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

Animated filter execution result (runtime field)

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

Whether the line segment is visible

Whether the line segment is smooth

Line segment color

Line segment color opacity

Line segment width

Annotation point configuration

Selector for annotation points, used to select data points.

Dimension field, ID of an item in dimensions

Operator

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

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

Operator

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

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

Same as operator

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

Animated filter (AI-generated code execution)

Implementation of complex data filtering logic through AI-generated JavaScript code. Suitable for scenarios difficult to express with static selectors, such as Top N, statistical analysis, and complex conditions.

Core capabilities:

- Supports any complex data filtering conditions

- Use built-in utility functions for data manipulation

- Safe execution in the browser environment (Web Worker sandbox)

Environment requirement: Only supports browser environment, Node.js environment will use fallback

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

Chart animated filter configuration

Filter chart markers (bars, points, etc.) through AI-generated JavaScript code

Description of the user's filtering needs (natural language)

AI-generated JavaScript filtering code

- Only built-in utility functions can be used (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, field represents the field to be highlighted

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

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

Dimension field, ID of an item in dimensions

Operator

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

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

Operator

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

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

Same as operator

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

Animated 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; generally set to 'right', where text is displayed to the left of the annotation point to ensure it's in the chart's visible area.

It is recommended to set to 'right' to ensure the text is on the left side of the annotation point.

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

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

center: Text is centered on the annotation point, with its center aligned to the point.

Vertical text alignment; generally set to 'top', where text is displayed at the bottom of the annotation point to ensure it's in the chart's visible area.

It is recommended to set to 'top' to ensure the text is fully displayed in the chart's visible area.

top: Text is at the bottom of the annotation point, with its top edge aligned to the point.

middle: Text is centered on the annotation point, with its center aligned to the point.

bottom: Text is above the annotation 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

Overall pixel offset of the annotation point in the Y direction. When the point is above the chart (larger values), positive values are recommended; when below (smaller values), negative values are recommended.

Negative values offset upwards, e.g., set to -10 to move the entire component (text, background) up by 10 pixels.

Positive values offset downwards, e.g., set to 10 to move the entire component (text, background) down by 10 pixels.

Overall pixel offset of the annotation point in the X direction. When the point is on the left side of the chart (start of the category axis), positive values are recommended; when on the right (end of the axis), negative values are recommended.

Negative values offset to the left, e.g., set to -10 to move the entire component (text, background) left by 10 pixels.

Positive values offset to the right, e.g., set to 10 to move the entire component (text, background) right by 10 pixels.

Dimension value annotation line configuration

Fixed X value for annotating vertical lines. If the category axis is on the X-axis, input a dimension value; if the numeric axis is on the X-axis, input a specific numeric value.

Animated filter (AI-generated code execution)

Animated calculation of annotation line values through AI-generated JavaScript code. Suitable for cases requiring dynamic determination of annotation line positions based on data, such as average, maximum, quantile, business lines, etc.

Only supports browser environment (requires Web Worker).

Description of the user's filtering needs (natural language)

AI-generated JavaScript filtering code

- Only built-in utility functions can be used (access via _ or R)

- Input parameter: data (array)

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

- Applicable scenarios: Animated numeric values needed for annotation lines (horizontal, vertical)

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

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

Animated filter execution result (runtime field)

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

Annotation text

Text position; the location of the annotation line label (relative to the line).

Text color

Text font size

Text font weight

Text alignment; generally no setting needed.

Recommended to set to 'right' to ensure text is on the left side of the annotation line.

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

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

center: Text is centered on the reference line, with its center aligned to the (vertical) annotation line.

Vertical text alignment; generally no setting needed.

Recommended to set to 'top' to ensure the text is fully displayed in the chart's visible area.

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

middle: Text is centered on the reference line, with its center aligned to the end of the (vertical) annotation line.

bottom: Text is at the top of the reference line, with its bottom edge aligned to the end 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

Numeric annotation line configuration

Fixed Y value for annotating horizontal lines. If the category axis is on the Y-axis, input a dimension value; if the numeric axis is on the Y-axis, input a specific numeric value.

Animated filter (AI-generated code execution)

Animated calculation of annotation line values through AI-generated JavaScript code. Suitable for cases requiring dynamic determination of annotation line positions based on data, such as average, maximum, quantile, business lines, etc.

Only supports browser environment (requires Web Worker).

Description of the user's filtering needs (natural language)

AI-generated JavaScript filtering code

- Only built-in utility functions can be used (access via _ or R)

- Input parameter: data (array)

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

- Applicable scenarios: Animated numeric values needed for annotation lines (horizontal, vertical)

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

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

Animated filter execution result (runtime field)

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

Annotation text

Text position

The location of the annotation line label (relative to the line).

Text color

Text font size

Text font weight

Text alignment; generally no setting needed.

Recommended to set to 'right' to ensure text is on the left side of the annotation line.

right: Text is on the left side of the reference line, with its right edge aligned to the (horizontal) annotation line's end.

left: Text is on the right side of the reference line, with its left edge aligned to the (horizontal) annotation line's end.

center: Text is centered on the reference line, with its center aligned to the (horizontal) annotation line's end.

Vertical text alignment; generally no setting needed.

Recommended to set to 'top' to ensure the text is fully displayed in the chart's visible area.

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

middle: Text is centered on the reference line, with its center aligned to the (horizontal) annotation line.

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

Whether the background is visible

Background color

Background border color

Background border width

Background border width

Background border radius

Background padding

Whether the line is visible

Whether the line is visible

Line color

Line width

Line style

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

Primary color for the part greater than the annotation value.

Primary color for the part smaller than the annotation value.

Annotation area configuration

Data tagging based on selected data.

Dimension field, ID of an item in dimensions

Operator

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

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

Operator

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

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

Same as operator

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

Annotation text

Text position

Text color

Text font size

Text font weight

Text alignment; generally set to 'right', where text is displayed in the middle of the annotation area to ensure it's in the chart's visible area.

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 its right edge aligned to the area.

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

center: Text is centered in the annotation area, with its center aligned to the area.

Vertical text alignment; generally set to 'top', where text is displayed at the bottom of the annotation area to ensure it's in the chart's visible area.

Recommended to set to 'top' to ensure the text is fully displayed in the chart's visible area.

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

middle: Text is centered on the annotation area, with its center aligned to the area.

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

Whether the background is visible

Background color

Background border color

Background border color

Background border width

Background border radius

Background border radius

Background padding

Annotation area color

Annotation area opacity

Annotation area border color

Annotation area border width

Annotation area border radius

Line style of the annotation area border.

Margin of the annotation area.

Dimension linkage configuration

Pivot chart dimension linkage configuration

Whether to enable pivot chart dimension linkage.

Whether to display tooltips for all sub-charts corresponding to the dimensions.

Whether to display the label corresponding to the crosshair.

Locale configuration