#AreaPercent

Percent Area Chart, suitable for showing trends of multiple category proportions over time, with the Y-axis displaying proportional relationships in percentage format.

Applicable scenarios:

- Compositional change analysis of time series

- Comparative analysis of proportional trends among multiple categories

- Simultaneous display of cumulative and single category proportions

Percent Area Chart

Percent Area Chart, showing the change in proportions of multiple categories over a specific dimension in percentage format.

Dataset

A TidyData-compliant, pre-aggregated dataset defining the chart's data source and structure. Users do not need to manually process input data — VSeed's powerful Data Reshape capability handles it automatically. Percent Area Chart data is ultimately reshaped to 2 dimensions and 1 measure.

Dimensions

The first dimension is mapped to the X-axis; the remaining dimensions are merged with measure names (when multiple measures exist) and 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

Measures

Percent Area Chart measures are automatically merged into one measure, mapped to the Y-axis. Measure names are merged with the remaining dimensions and displayed as legend items.

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

Pagination configuration for the chart's pagination feature

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

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

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)')

Color

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

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 measure values as a percentage.

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 graphic element color.

label position

Whether the label anti-overlap feature is enabled.

Label filtering; by default, the relationship between selectors is OR.

Dimension field; ID of an item in dimensions.

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 field values; supports arrays.

Dynamic filter (AI-generated code execution)

Implement complex data filtering logic via 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 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

Implement filtering of 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 __row_index field representing line 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 line number, field represents the field to be highlighted

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

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

Dimension field; ID of an item in dimensions.

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 field values; supports arrays.

Dynamic filter execution results (runtime field)

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

Legend

Legend configuration, used to define chart legends, including position, format, style, etc.

Whether legend functionality is enabled.

Whether 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 many legend items, 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 displayed columns.

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

Tooltip

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

Whether tooltip functionality is enabled.

Brush Selection

Brush configuration used to enable/disable brush selection capability.

Chart brush configuration

Whether to enable brush selection.

Brush type

Define the shape and direction of the brush selection box.

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

- polygon: Polygonal selection, draw any polygon by clicking multiple points for selection.

- x: Selection in X direction only, X-axis is constrained, Y-axis is unlimited.

- y: Selection in Y direction only, Y-axis is constrained, X-axis is unlimited.

Brush mode; single or multiple.

Define the mode of selection.

- 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 brush ends.

Style for data inside the brush selection.

Define the style of data points that are selected.

Opacity

Opacity of the selected data points, range 0-1.

Stroke color

Stroke width

Style for data outside the brush selection.

Define the style of data points that are NOT selected.

Opacity

Opacity of data points not selected, range 0-1.

Stroke color

Stroke width

X-axis

Category axis (X-axis) configuration, used to define the chart's X-axis, including position, format, style, etc.

Whether the axis is visible.

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

Whether to force the display of 0 values on the axes. This configuration is disabled if 'min' and 'max' are set; only effective for the numeric axis.

Axis labels auto-hide; if two labels overlap (interval is less than 'autoHideGap'), the labels causing the overlap will be hidden. Only effective for the category axis.

Axis label auto-hide gap; if the interval between two label texts is smaller than autoHideGap, the label causing overlap is automatically hidden. Only effective for category axes.

When autoHide is enabled, autoHide is used, set on autoHideSeparation.

When autoHide is disabled, sampling is used, set on minGap.

Axis label, auto-rotate; when label width exceeds axis length, automatically rotate the label. Only effective for category axes.

Axis label, auto-rotate angle range; the range of label rotation angles when auto-rotate is enabled. Only effective for category axes.

Axis label, auto-limit length; when label width exceeds axis length, the excess part is represented by an ellipsis. The label is visible on hover. Only effective for category axes.

Axis label, the maximum length for auto-limiting length; when label text length exceeds the maximum length, the excess part is represented by an ellipsis. The 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 inside.

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

Numeric axis (Y-axis) configuration, used to define the chart's Y-axis, including position, format, style, etc.

Whether the axis is visible.

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

The 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 scale interval to make tick labels more readable. This configuration is disabled if 'min' and 'max' are set. Only effective for numeric axes.

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

Whether to force the display of the 0 value on the axis. This configuration is disabled if 'min' and 'max' are set. Only effective for numeric axes.

Whether to automatically format tick labels for numeric axes. Only effective for numeric axes. When 'autoFormat' is true, 'numFormat' configuration is disabled.

Number formatting for numeric axes. 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

Y-axis tick label

Whether the label is visible.

Label color

Label font size

Label font weight

Label rotation angle

Y-axis line

Whether the axis line is visible.

Axis line color

Axis line width

Y-axis tick

Whether the tick is visible.

Whether the tick is inside.

Tick color

Tick size

Y-axis title

Whether the title is visible.

Title text, follows field configuration by default.

Title color

Title font size

Title font weight

Y-axis grid line

Grid line color

Grid line width

Grid line type

Y-axis animation configuration

Animation duration

Animation easing function :::note{title=Description} 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 prompt line

The vertical prompt line displayed when the mouse moves over the chart.

Crosshair configuration, a type used to display crosshairs (prompt lines) in charts.

Whether to show the crosshair line.

Crosshair line color

Crosshair label color

Whether to show the crosshair label.

Crosshair label background color

X-axis sort configuration; supports sorting by dimensions, measures, or custom order.

Category axis sort configuration; supports sorting by dimensions, measures, or custom order.

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

The field the sort depends on; can be dimension ID or measure ID.

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

Legend sort configuration; supports sorting by dimensions, measures, or custom order.

Legend sort configuration; supports sorting by dimensions, measures, or custom order. The sort array follows left-to-right or top-to-bottom order.

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

The field the sort depends on; can be dimension ID or measure ID.

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

Chart theme. Theme is a lower-priority configuration containing common settings shared across all chart types and configurations for specific chart categories.

Includes built-in light and dark themes; users can define custom themes through the Builder.

Theme

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

Point marker style

Point marker style configuration, used to define chart point marker styles, including color, borders, etc.

Supports global styles or conditional style configurations.

Data filter

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

If 'selector' is not configured, the style applies globally.

Data selector

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

If 'selector' is not configured, the style applies globally.

Dimension field; ID of an item in dimensions.

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 field values; supports arrays.

Dynamic filter (AI-generated code execution)

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

Suitable for scenarios where static selectors are difficult to express, such as Top N, statistical analysis, or 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 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

Implement filtering of 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 __row_index field representing line 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 line number, field represents the field to be highlighted

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

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

Dimension field; ID of an item in dimensions.

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 field 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 size

Point marker color

Point marker color

Point marker color opacity

Point marker color opacity

Point marker border color

Point marker border color

Point marker border width

Point marker border width

Point marker border style

Point marker border style

Line marker style

Line marker style configuration, used to define chart line marker styles, including color, opacity, curves, etc.

Supports global styles or conditional style configurations.

Data filter

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

If 'selector' is not configured, the style applies globally.

Data selector

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

If 'selector' is not configured, the style applies globally.

Dimension field; ID of an item in dimensions.

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 field values; supports arrays.

Dynamic filter (AI-generated code execution)

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

Suitable for scenarios where static selectors are difficult to express, such as Top N, statistical analysis, or 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 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

Implement filtering of 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 __row_index field representing line 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 line number, field represents the field to be highlighted

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

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

Dimension field; ID of an item in dimensions.

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 field 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 color opacity

Line segment width

Area marker style

Area marker style configuration, used to define chart area marker styles, including color, opacity, borders, etc.

Supports global styles or conditional style configurations.

Data filter

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

If 'selector' is not configured, the style applies globally.

Data selector

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

If 'selector' is not configured, the style applies globally.

Dimension field; ID of an item in dimensions.

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 field values; supports arrays.

Dynamic filter (AI-generated code execution)

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

Suitable for scenarios where static selectors are difficult to express, such as Top N, statistical analysis, or 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 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

Implement filtering of 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 __row_index field representing line 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 line number, field represents the field to be highlighted

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

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

Dimension field; ID of an item in dimensions.

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 field values; supports arrays.

Dynamic filter execution results (runtime field)

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

Whether the area marker is visible.

Area marker color

Area marker color opacity

Annotation point

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

Annotation point selector, used to select data points.

Dimension field; ID of an item in dimensions.

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 field values; supports arrays.

Dynamic filter (AI-generated code execution)

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

Suitable for scenarios where static selectors are difficult to express, such as Top N, statistical analysis, or 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 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

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

User requirement description (natural language)

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

- Input parameters: data (array); each item contains the __row_index field representing the row number

- Must return an array of row index and field combinations: Array<{ __row_index: number, field: string }>

- __row_index represents the row number of the original data item, and field represents the field to be highlighted

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

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

Dimension field; ID of an item in dimensions.

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 field values; supports arrays.

Dynamic filter execution results (runtime field)

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

Annotation text

Text color

Text font size

Text font weight

Text alignment; typically set to 'right'. Text is displayed on the left side of the annotation point to ensure it stays within the visible area of the chart.

Recommended to set to 'right' to ensure the text is to the left of the annotation point.

right: Text is to the left of the annotation point, with the right edge of the text aligned to the annotation point.

left: Text is to the right of the annotation point, with the left edge of the text aligned to the annotation point.

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

Text vertical alignment; typically set to 'top'. Text is displayed at the bottom of the annotation point to ensure it stays within the visible area of the chart.

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

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

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

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

Background visible

Background color

Background border color

Background border width

Background border radius

Background padding

The overall pixel offset distance of the annotation point in the Y direction. When the annotation point is at the top of the chart (large values), a positive value is recommended; when it's at the bottom (small values), a negative value is recommended.

Negative values shift the entire unit upwards. For example, if set to -10, the entire annotation point component, including text and text background, will shift upwards by 10 pixels.

Positive values shift the entire unit downwards. For example, if set to 10, the entire annotation point component, including text and text background, will shift downwards by 10 pixels.

The overall pixel offset distance of the annotation point in the X direction. When the annotation point is on the left side of the chart (category axis start), a positive value is recommended; when it's on the right side (category axis end), a negative value is recommended.

Negative values shift the entire unit to the left. For example, if set to -10, the entire annotation point component, including text and text background, will shift left by 10 pixels.

Positive values shift the entire unit to the right. For example, if set to 10, the entire annotation point component, including text and text background, will shift right by 10 pixels.

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

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

Dynamic filter (AI-generated code execution)

AI-generated JavaScript code to dynamically calculate the annotation line value.

Suitable for cases where the annotation line position needs to be determined dynamically based on data, such as average, maximum, quantiles, business lines, etc.

Only supports browser environment (requires Web Worker).

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)

- Must return a single value: number | string

- Suitable scenario: Dynamic values needed for annotation lines (horizontal or vertical)

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

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

Dynamic filter execution results (runtime field)

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

Annotation text

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

Text color

Text font size

Text font weight

Text alignment; typically zero-configuration.

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

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

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

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

Text vertical alignment; typically zero-configuration.

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

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

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

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

Line visible

Line color

Line width

Line style

Background visible

Background color

Background border color

Background border width

Background border radius

Background padding

Numeric annotation line (including average line, maximum line, minimum line, etc.), displayed horizontally; allows setting the position, style, etc. Use this configuration to draw annotation lines corresponding to numeric values like the average.

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

Dynamic filter (AI-generated code execution)

AI-generated JavaScript code to dynamically calculate the annotation line value.

Suitable for cases where the annotation line position needs to be determined dynamically based on data, such as average, maximum, quantiles, business lines, etc.

Only supports browser environment (requires Web Worker).

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)

- Must return a single value: number | string

- Suitable scenario: Dynamic values needed for annotation lines (horizontal or vertical)

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

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

Dynamic filter execution results (runtime field)

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

Annotation text

Text position

Annotation line label position (relative to the line).

Text color

Text font size

Text font weight

Text alignment; typically does not need to be set.

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

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

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

center: Text is centered on the reference line, with the center of the text aligned to the end point of the (horizontal) annotation line.

Text vertical alignment; typically does not need to be set.

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

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

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

bottom: Text is at the top of the reference line, with the bottom edge of the text aligned to 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 the function to split the main line into two segments.

The color for the segment above the annotation value.

The color for the segment below the annotation value.

Annotation area

Annotation area configuration; defines the chart's annotation area based on selected data, including position, style, etc.

Depends on selected data for data markers.

Dimension field; ID of an item in dimensions.

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 field values; supports arrays.

Annotation text

Text position

Text color

Text font size

Text font weight

Text alignment; typically set to 'right'. Text is displayed in the middle of the annotation area, ensuring it stays within the visible area of the chart.

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 of the text aligned to the annotation area.

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

center: Text is centered on the annotation area, with the center of the text aligned to the annotation area.

Text vertical alignment; typically set to 'top'. Text is displayed at the bottom of the annotation area, ensuring it stays within the visible area of the chart.

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

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

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

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

Background 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 color opacity

Annotation area border color

Annotation area border width

Annotation area border radius

Annotation area border line type

Annotation area margin.

Whether to enable dimension linkage when pivot functionality or measure combinations are active.

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 tooltips for all sub-charts corresponding to the dimension.

Whether to show the corresponding crosshair label.

Language

Chart language configuration; supports 'zh-CN' and 'en-US'. Additionally, intl.setLocale('zh-CN') can be called to set the language.