#DualAxis

Dual-axis chart, suitable for comparing two measures with different magnitudes or units, including a primary axis and a secondary axis

Applicable scenarios:

- Comparative analysis of measures with different magnitudes

- Trend comparison of correlated measures

- Compound measures that need to show values and growth rates at the same time

- Supports combinations of different chart types, such as line chart + bar chart / line chart + area chart / area chart + bar chart

Dual-axis chart, a composite chart showing comparisons between two measures with different magnitudes.

An aggregated dataset conforming to the TidyData specification, used to define the chart's data source and structure. User-provided datasets do not require preprocessing. VSeed's powerful Data Reshape capability performs the reshape automatically, and column chart data is ultimately converted into 2 dimensions and 1 measure.

The first dimension of the column chart is mapped to the X-axis; remaining dimensions are merged with measure names when multiple measures exist, then displayed as legend items.

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

Dual-axis chart measures.

For measures mapped to primaryYAxis and secondaryYAxis in encoding, you can set the parentId property to group measures. Measures in different groups are displayed in different subcharts. You can also set the chartType property to specify the chart type for different measure groups.

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万

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

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

• color: Measure mapped to the color channel.

• label: Measure mapped to the label channel.

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

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

There are two ways to configure the measure tree: Option 1 is directly configuring a measure tree with children; Option 2 is configuring a flat measure list with parentId. These two methods cannot be used simultaneously

• column: Bar (Column) Chart

• columnParallel: Parallel Column Chart

• columnPercent: Percent Column Chart

• area: Area Chart

• areaPercent: Percent Area Chart

• scatter: Scatter Chart

Pagination configuration, used to specify the field name for pagination, which must be a dimension

Pagination field; specifies the field name for pagination, must be a dimension

Current pagination value; specifies the value used to determine the current page

Current pagination value; specifies the value used to determine the current page

Primary Y-axis configuration for the dual-axis chart, used to define the primary axis, including its position, style, etc. When multiple measure groups exist, primaryYAxis can be an array where each entry corresponds to a primary Y-axis.

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 the axis scale interval to make the labels more readable; this configuration is ignored when min and max are specified. Only effective for numeric axes.

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

Whether to force the display of the zero value on the axis; this configuration is ignored when min and max are specified. Only effective for numeric axes.

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

Numeric axis number formatting; only effective for numeric axes, with 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 points inward

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 line

Chart background color, Background color can be a color string (e.g. 'red', 'blue'), or a hex, rgb, or rgba value (e.g. '#ff0000', 'rgba(255,0,0,0.5)')

Grid line width

Grid line type

Y-axis animation configuration

X-axis, category axis; X-axis configuration used to define the chart's x-axis, including its position, format, style, etc.

Animation easing function

Animation duration

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 the axis scale interval to make the labels more readable; this configuration is ignored when min and max are specified. Only effective for numeric axes.

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

Whether to force the display of the zero value on the axis; this configuration is ignored when min and max are specified. Only effective for numeric axes.

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

Numeric axis number formatting; only effective for numeric axes, with 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 points inward

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 line

Grid line color

Grid line width

Grid line type

Y-axis animation configuration

Animation duration

Animation easing function

X-axis, category axis; X-axis configuration used to define the chart's x-axis, including its position, format, style, etc.

Whether the axis is visible

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

Whether to force the display of the zero value on the axis; this configuration is ignored when min and max are specified. Only effective for numeric axes.

Axis label automatic hiding; if two labels overlap (interval is less than autoHideGap), the overlapping labels are automatically hidden. Only effective for category axes.

Axis label automatic hiding interval; if the interval between two labels is less than autoHideGap, the overlapping labels are automatically hidden. Only effective for category axes.

autoHide enabled: uses autoHideSeparation.

autoHide disabled: uses sampling, set on minGap.

Axis label automatic rotation; labels are automatically rotated when their width exceeds the axis length. Only effective for category axes.

Axis label automatic rotation angle range; defines the rotation angle range when automatic rotation is enabled. Only effective for category axes.

Axis label automatic length limit; when label width exceeds the axis length, the excess is indicated by an ellipsis and becomes visible upon hovering. Only effective for category axes.

Axis label maximum length limit; when label text length exceeds the maximum, the excess is indicated by an ellipsis and becomes visible upon hovering. 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 points inward

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 line

Grid line color

Grid line width

Grid line type

X-axis animation configuration

Animation duration

Animation easing function

Chart background color. The background color can be a color string (default is transparent), such as 'red' or 'blue', or a hex, rgb, or rgba value like '#ff0000' or 'rgba(255,0,0,0.5)'.

Color configuration for defining the chart's color scheme, including color lists, color mappings, and color gradients.

Discrete color scheme used to define the colors of different elements in the chart

Linear gradient color scheme used to define the colors of different elements in the chart

Color mapping used to map data values to specific colors

Positive/negative color configuration; defines the color for positive values in the chart

Positive/negative color configuration; defines the color for negative values in the chart

Label configuration for defining chart data labels, including their position, format, and style.

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 font color automatically inverts based on the graphic element color

label position

Whether the label anti-overlap feature is enabled

Label filtering; the default relationship between selectors is OR

Dimension field; the ID of 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

Dynamic filter (AI-generated code execution)

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

Key capabilities:

• Supports arbitrarily complex data filtering conditions

• Uses built-in utility functions for data operations

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

Environment requirement: only browser environments are supported; Node.js environments use fallback

Note: selector and dynamicFilter cannot be used at the same time; dynamicFilter has higher priority

Chart dynamic filter configuration

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

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

AI-generated JavaScript filtering code

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

- Input parameters: data (array), 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 row number of the original data item, and field represents the field to be illuminated

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

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

Dimension field; the ID of 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

Dynamic filter execution result (runtime field)

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

Legend configuration; used to define the chart legend, including its position, format, style, etc.

Whether the legend feature is enabled

Whether the legend border is enabled

Legend font color

Pager icon color

Pager icon disabled color

Legend font size

Legend font color

Legend font weight

Legend shape

Legend position

Maximum number of columns or rows for the legend when many items exist.

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

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

Tooltip configuration; used to define chart tooltips, including their position, format, style, etc.

Whether the tooltips feature is enabled

Brush selection

Brush configuration; used to enable/disable brush selection capabilities.

Chart brush configuration

Whether to enable brush selection

Brush type

Defines the shape and direction of the selection box.

- rect: Rectangular selection; selection can be made in both X and Y directions simultaneously.

- polygon: Polygon selection; perform selection by clicking multiple points to draw an arbitrary polygon.

- x: X-axis selection; selection only in the X direction, with no limits in the Y direction.

- y: Y-axis selection; selection only in the Y direction, with no limits in the X direction.

Brush selection mode: single or multiple.

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 the brush selection ends

Style for selected data items

Defines the style of the selected data points.

Opacity

Opacity of the selected data points, ranging from 0 to 1

Stroke color

Stroke width

Style for unselected data items

Defines the style of the unselected data points.

Opacity

Opacity of unselected data points, ranging from 0 to 1

Stroke color

Stroke width

Vertical tooltip configuration used to define the chart's vertical tooltip, including its color, label style, etc.

Crosshair rectangle configuration; a configuration type used to display a crosshair rectangle in the chart

Whether to show the crosshair rectangle

Crosshair rectangle color

Crosshair rectangle label color

Whether to show the crosshair rectangle label

Crosshair rectangle label background color

X-axis sorting configuration; supports sorting by dimensions or measures, as well as custom sort orders

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

Sort order; can be 'asc' or 'desc'

Field to sort by; can be a dimension ID or measure ID

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

Legend sort configuration; supports sorting by dimension or measure, as well as custom sort order.

Legend sort configuration; supports sorting by dimension or measure, as well as custom sort order.; sort arrays follow left-to-right or top-to-bottom order.

Sort order; can be 'asc' or 'desc'

Field to sort by; can be a dimension ID or measure ID

Custom sort order; this order will be directly applied to the legend. Ascending is from left-to-right or top-to-bottom, descending from right-to-left or bottom-to-top.

Chart theme; theme is a low-priority configuration containing general configurations shared across all chart types and specific ones for individual classes. Built-in light and dark themes are available; users can also customize themes via the Builder.

Theme

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

Maximum width of the bars, can be a pixel value or a percentage string

The distance between bars under the same category, can be a pixel value or a percentage string

Rectangular primitive style; used to define the bar chart style, including color, borders, corner radius, etc.

Supports global styles or conditional style configurations.

Data filter

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 is applied globally.

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 is applied globally.

Dimension field; the 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

Dynamic filter (AI-generated code execution)

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

Suitable for Top N, statistical analysis, complex conditions, and other scenarios that are hard to express with static selectors.

Key capabilities:

• Supports arbitrarily complex data filtering conditions

• Uses built-in utility functions for data operations

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

Environment requirement: only browser environments are supported; Node.js environments use fallback

Note: selector and dynamicFilter cannot be used at the same time; dynamicFilter has higher priority

Chart dynamic filter configuration

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

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

AI-generated JavaScript filtering code

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

- Input parameters: data (array), 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 row number of the original data item, and field represents the field to be illuminated

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

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

Dimension field; the ID of 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

Dynamic filter execution result (runtime field)

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

Whether the bar element (rectangle) is visible

Bar element (rectangle) color

Bar element (rectangle) opacity

Bar element (rectangle) border color

Bar element (rectangle) border width

Bar element (rectangle) border style

Bar element (rectangle) corner radius

Bar element (rectangle) stroke opacity

Line element style configuration, used to define the style for chart line elements, including colors, opacity, curves, etc.

Supports global styles or conditional style configurations.

Data filter.

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

If no selector is configured, the style applies globally.

Data selector

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

If no selector is configured, the style applies globally.

Dimension field, the ID of a dimension item

Operator

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

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

Operator

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

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

Same as operator

Select dimension values; supports arrays

Dynamic filter (AI-generated code execution)

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

Suitable for Top N, statistical analysis, complex conditions, and other scenarios that are hard to express with static selectors.

Key Capabilities:

- Supports any complex data filtering conditions

- Use built-in utility functions for data manipulation

- Secure execution in browser environment (Web Worker sandbox)

Environment requirements: Only supports browser environment; Node.js environment will use fallback

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

Chart dynamic filter configuration

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

User requirement description (natural language)

AI-generated JavaScript filtering code

- Only built-in utility functions (accessible via _ or R) are allowed

- Input parameters: data (array), 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 row number; field represents the field to highlight

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

Fallback plan when code execution fails or environment is not supported

Dimension field, the ID of a dimension item

Operator

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

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

Operator

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

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

Same as operator

Select dimension values; supports arrays

Dynamic filter execution results (runtime field)

Populated during the prepare() stage, read-only at runtime

Whether the line segment is visible

Whether the line segment is smooth

Line segment color

Line segment opacity

Line segment width

Line segment style

Point element style configuration, used to define the style for chart point elements, including colors, borders, etc.

Supports global styles or conditional style configurations.

Data filter.

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

If no selector is configured, the style applies globally.

Data selector

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

If no selector is configured, the style applies globally.

Dimension field, the ID of a dimension item

Operator

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

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

Operator

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

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

Same as operator

Select dimension values; supports arrays

Dynamic filter (AI-generated code execution)

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

Suitable for Top N, statistical analysis, complex conditions, and other scenarios that are hard to express with static selectors.

Core capabilities:

- Supports any complex data filtering conditions

- Uses built-in utility functions for data manipulation

- Safely executed in the browser environment (Web Worker sandbox)

Environment requirements: Only supports browser environment; Node.js environment will use fallback.

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

Chart dynamic filter configuration.

Implementation of filtering for chart markers (columns, points, etc.) via AI-generated JavaScript code.

User requirement description (natural language)

AI-generated JavaScript filtering code

- Only built-in utility functions (accessible via _ or R) are allowed

- Input parameters: data (array), 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 row number; field represents the field to highlight

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

Fallback plan when code execution fails or environment is not supported

Dimension field, the ID of a dimension item

Operator

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

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

Operator

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

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

Same as operator

Select dimension values; supports arrays

Dynamic filter execution results (runtime field)

Populated during the prepare() stage, read-only at runtime

Whether the point is visible

Point size

Point element color

Point element opacity

Point element border color

Point element border width

Point element border style

Area element style configuration, used to define the style for chart area elements, including colors, opacity, borders, etc.

Supports global styles or conditional style configurations.

Data filter.

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

If no selector is configured, the style applies globally.

Data selector

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

If no selector is configured, the style applies globally.

Dimension field, the ID of a dimension item

Operator

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

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

Operator

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

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

Same as operator

Select dimension values; supports arrays

Dynamic filter (AI-generated code execution)

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

Suitable for Top N, statistical analysis, complex conditions, and other scenarios that are hard to express with static selectors.

Key Capabilities:

- Supports any complex data filtering conditions

- Use built-in utility functions for data manipulation

- Secure execution in browser environment (Web Worker sandbox)

Environment requirements: Only supports browser environment; Node.js environment will use fallback

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

Chart dynamic filter configuration

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

User requirement description (natural language)

AI-generated JavaScript filtering code

- Only built-in utility functions (accessible via _ or R) are allowed

- Input parameters: data (array), 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 row number; field represents the field to highlight

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

Fallback plan when code execution fails or environment is not supported

Dimension field, the ID of a dimension item

Operator

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

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

Operator

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

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

Same as operator

Select dimension values; supports arrays

Dynamic filter execution results (runtime field)

Populated during the prepare() stage, read-only at runtime

Whether the area element is visible

Color of the area element

Opacity of the area element color

Annotation point configuration; defines points on the chart based on selected data, including their position, format, style, etc.

Selector for the annotation point, used to select data points.

Dimension field; the 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

Specifies the measure id that the annotation point belongs to. In multi-measure scenarios, it can be combined with selector to uniquely locate the annotation point for the target measure.

Dynamic filter (AI-generated code execution)

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

Suitable for Top N, statistical analysis, complex conditions, and other scenarios that are hard to express with static selectors.

Key capabilities:

• Supports arbitrarily complex data filtering conditions

• Uses built-in utility functions for data operations

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

Environment requirement: only browser environments are supported; Node.js environments use fallback

Note: selector and dynamicFilter cannot be used at the same time; dynamicFilter has higher priority

Chart dynamic filter configuration

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

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

AI-generated JavaScript filtering code

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

- Input parameters: data (array), 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 row number of the original data item, and field represents the field to be illuminated

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

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

Dimension field; the ID of 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

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. In general, set it to right so the text appears to the left of the annotation point and stays within the visible chart area

Recommended to set it to right, which keeps the text on the left side of the annotation point

right: the text is on the left side of the annotation point, with the right edge aligned to the point

left: the text is on the right side of the annotation point, with the left edge aligned to the point

center: the text is centered on the annotation point, with the text center aligned to the point

Text vertical alignment; generally set to 'top' so the text appears below the point, ensuring visibility within the chart area.

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

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

middle: Text is centered on the point.

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

Background visible

Background color

Background border color

Background border width

Background border radius

Background padding

The overall pixel offset of the annotation point in the Y direction. When the point is above the chart (higher values), it is recommended to set a positive value. When below (lower values), it is recommended to set a negative value.

A negative value shifts it upwards; for example, setting it to -10 shifts the entire annotation component (text, background) up by 10 pixels.

A positive value shifts it downwards; for example, setting it to 10 shifts the entire annotation component down by 10 pixels.

The overall pixel offset of the annotation point in the X direction. When the point is on the left of the chart (start of the category axis), it is recommended to set it to a positive value. When on the right (end of the category axis), it is recommended to set a negative value.

A negative value shifts it leftwards; for example, setting it to -10 shifts the entire annotation component (text, background) left by 10 pixels.

A positive value shifts it rightwards; for example, setting it to 10 shifts the entire annotation component right by 10 pixels.

Dimension value mark line, displayed vertically; allows setting position, style, etc.

Fixed X-value for the vertical annotation line; if the category axis is in the X direction, enter a dimension value; if the numeric axis is in the X direction, enter a specific value.

Dynamic filter (AI-generated code execution)

Dynamically calculates the annotation line value via AI-generated JavaScript code.

Suitable for scenarios where the annotation line position must be determined dynamically from data, such as average, maximum, quantile, and business lines.

Only supports browser environments (requires Web Worker).

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

AI-generated JavaScript filtering code

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

- Input parameters: data (array)

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

- Applicable scenarios: Dynamic values needed for annotation lines (horizontal or vertical)

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

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

Dynamic filter execution result (runtime field)

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

Annotation text

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

Text color

Text font size

Text font weight

Text alignment; generally unnecessary to set.

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

right: Text is on the left of the reference line; the right edge of the text aligns with the (vertical) annotation line.

left: Text is on the right of the reference line; the left edge of the text aligns with the (vertical) annotation line.

center: Text is centered on the reference line; the center of the text aligns with the (vertical) annotation line.

Text vertical alignment; generally unnecessary to set.

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

top: Text is at the bottom of the reference line; the top edge of the text aligns with the (vertical) annotation line's end.

middle: Text is centered on the reference line; the center of the text aligns with the (vertical) annotation line's end.

bottom: Text is at the top of the reference line; the bottom edge of the text aligns with the (vertical) annotation line's end.

Line visible

Line color

Line width

Line style

Background visible

Background color

Background border color

Background border width

Background border radius

Background padding

Numeric mark line (including mean, maximum, minimum lines, etc.), displayed horizontally; allows setting position, style, etc. For drawing mark lines corresponding to numeric values like the mean, use this configuration.

Fixed Y-value for the horizontal annotation line; if the category axis is in the Y direction, enter a dimension value; if the numeric axis is in the Y direction, enter a specific value.

Dynamic filter (AI-generated code execution)

Dynamically calculates the annotation line value via AI-generated JavaScript code.

Suitable for scenarios where the annotation line position must be determined dynamically from data, such as average, maximum, quantile, and business lines.

Only supports browser environments (requires Web Worker).

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

AI-generated JavaScript filtering code

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

- Input parameters: data (array)

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

- Applicable scenarios: Dynamic values needed for annotation lines (horizontal or vertical)

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

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

Dynamic filter execution result (runtime field)

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

Annotation text

Text position

Location of the annotation line's label (relative to the line).

Text color

Text font size

Text font weight

Text alignment. In general, no setting is required

Recommended to set it to right, which keeps the text on the left side of the annotation line

right: the text is on the left side of the reference line, with the right edge aligned to the end of the horizontal annotation line

left: the text is on the right side of the reference line, with the left edge aligned to the end of the horizontal annotation line

center: the text is centered on the reference line, with the text center aligned to the end of the horizontal annotation line

Text vertical alignment; generally unnecessary to set.

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

top: Text is at the bottom of the reference line; the top edge of the text aligns with the horizontal annotation line.

middle: Text is centered on the reference line; the center of the text aligns with the horizontal annotation line.

bottom: Text is at the top of the reference line; the bottom edge of the text aligns with the horizontal annotation line.

Background visible

Background color

Background border color

Background border width

Background border width

Background border radius

Background padding

Line visible

Line visible

Line color

Line width

Line style

Whether to enable splitting the main line into two segments.

Primary color for parts greater than the annotation value

Primary color for parts less than the annotation value

Annotation area configuration; defines an area on the chart based on selected data, including its position, style, etc.

Depends on selected data for area marking.

Dimension field; the 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'

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

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

Annotation text

Annotation text

Text position

Text color

Text font size

Text font weight

Text alignment. In general, set it to right; the text is displayed in the middle of the annotation area to ensure it stays within the visible chart area

Recommended to set it to center, which keeps the text in the middle of the annotation area

right: the text is on the left side of the annotation area, with the right edge aligned to the annotation area

left: the text is on the right side of the annotation area, with the left edge aligned to the annotation area

center: the text is centered in the annotation area, with the text center aligned to the annotation area

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

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

middle: Text is centered in the area.

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

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

Background visible

Background color

Background border color

Background border width

Background border radius

Background padding

Mark area region color

Mark area region color opacity

Mark area region border color

Mark area region border width

Mark area region border radius

Line type for the mark area region border

Margin for the mark area region

When chart pivoting or measure combination is enabled, whether to enable dimension linkage.

When hovering over a dimension value, highlight data with the same dimension value in other charts.

Pivot chart dimension linkage configuration

Whether to enable pivot chart dimension linkage

Whether to show Tooltip information for child charts corresponding to all dimensions

Whether to show the label corresponding to the crosshair

Chart language configuration. Supports 'zh-CN' and 'en-US'. You can also call intl.setLocale('zh-CN') to set the language