#Area

Area Chart, suitable for showing data trends over time and cumulative relationships, with filled areas enhancing data comparison. The X-axis is a categorical axis (categorical data), and the Y-axis is a numeric axis (continuous data).

Applicable scenarios:

- Show trend changes in a single data series

- Emphasize the cumulative effect of totals over time

- Compare total differences across multiple data series

Area Chart, Chart type for displaying data trends and cumulative relationships

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

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万

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

label position

Whether the label anti-overlap function is enabled

Label filtering, default relationship between selectors is 'Or'

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 data items based on dimension values, supports arrays

Dynamic filter (AI-generated code execution)

Implement complex data filtering logic via AI-generated JavaScript code

Key Capabilities:

- Supports any complex data filtering conditions

- 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 data items based on dimension 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 the legend function is enabled

Whether the legend border is enabled

Legend font color

Pager icon color

Pager icon disabled color

Legend font size

Legend font color

Legend font weight

Legend shape

Legend position

Maximum number of columns or rows when many legend items exist

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

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

Chart region padding

Maps to VChart region[0].padding, used to reserve space for annotations, labels, and other elements that extend outside the chart region.

tooltips

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

Whether the tooltip function is enabled

Brush Selection

Brush configuration, used to enable/disable brush selection capability

Chart brush selection configuration

Whether to enable brush selection

Brush type

Defines the shape and selection direction of the brush

- rect: rectangular brush selection; can select in both X-axis and Y-axis directions at the same time

- polygon: polygon brush selection; draws an arbitrary polygon by clicking multiple points

- x: X-axis brush selection; only selects in the X-axis direction, with no restriction in the Y-axis direction

- y: Y-axis brush selection; only selects in the Y-axis direction, with no restriction in the X-axis direction

Brush mode, single or multiple selection

Define the selection mode

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

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

Whether to clear the selection box when selection ends

Style for selected data items

Define the style for data points within the brush

Opacity

Opacity of selected data points, range 0-1

Stroke color

Stroke width

Style for unselected data items

Define the style for data points outside the brush

Opacity

Opacity of unselected data points, range 0-1

Stroke color

Stroke width

Animation configuration

Chart animation configuration, with available effects constrained by chart type.

Whether to enable line/area chart animation

Line/area chart animation parameters

Line/area chart appear animation configuration

Line/area chart appear effects, supporting load and growth animations

Whether to enable the current animation stage

Animation easing function

Animation duration, in milliseconds

Animation highlight or atmosphere color

Line/area chart update animation configuration

Line/area chart update effects, supporting growth animation

Whether to enable the current animation stage

Animation easing function

Animation duration, in milliseconds

Animation highlight or atmosphere color

Line/area chart loop animation configuration

Whether to enable loop animation

Loop animation interval, in milliseconds

Line/area chart loop animation configuration

Line/area chart loop effects

Whether to enable the current animation stage

Animation easing function

Animation duration, in milliseconds

Animation highlight or atmosphere color

Line/area chart atmosphere animation configuration

Atmosphere animation easing function

Atmosphere animation color

Atmosphere animation effect, supporting ripple, fade, and breath effects

X-axis

Category axis, X-axis configuration, used to define the X-axis including position, format, style, etc.

Whether the axis is visible

Whether the axis is reversed, only effective for numeric axes

Whether to force display of 0 on the axis; this is ignored if min and max are set and is only effective for numeric axes.

Axis label auto-hide; if two labels overlap, the overlapping label is hidden. Only effective for category axes.

Axis label auto-hide interval; if the interval between two labels is less than autoHideGap, the overlapping label is hidden. Only effective for category axes.

autoHide enabled: uses autoHideGap

autoHide disabled: uses sampling with minGap

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

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

Axis label auto-limit; if the label exceeds the axis length, it is truncated with an ellipsis and shown fully on hover. Only effective for category axes.

Axis label auto-limit maximum length; if the label text length exceeds this value, it is truncated with an ellipsis and shown fully on hover. Only effective for category axes.

X-axis tick label

Whether the label is visible

Label color

Label font size

Label font weight

Label rotation angle

X-axis line

Whether the axis line is visible

Axis line color

Axis line width

X-axis tick

Whether the tick is visible

Whether the tick is oriented inward

Tick color

Tick size

X-axis title

Whether the title is visible

Title text, defaults to the 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

Y-axis

Numeric axis, Y-axis configuration, used to define the Y-axis including position, format, style, etc.

Whether the axis is visible

The minimum value of the axis, takes priority over 'nice' and 'zero'

The maximum value of the axis, takes priority over 'nice' and 'zero'; if true, it 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 labels more readable; this is ignored if min and max are set and is only effective for numeric axes.

Whether the axis is reversed, only effective for numeric axes

Whether to force display of 0 on the axis; this is ignored if min and max are set and is only effective for numeric axes.

Whether to automatically format axis tick labels; only effective for numeric axes. If autoFormat is true, numFormat configuration is ignored.

Numeric axis number formatting; only effective for numeric axes and has lower priority than autoFormat.

Number format type, supports: number (decimal), percent (%), permille (‰), scientific notation

Number format ratio, cannot be 0

Number format symbol, e.g. %, ‰

Thousands separator for number formatting

Number format suffix

Number format prefix

Decimal places for number formatting, using the browser's Intl.NumberFormat minimumFractionDigits and maximumFractionDigits; lower priority than significantDigits

Significant digits for number formatting, using the browser's Intl.NumberFormat minimumSignificantDigits and maximumSignificantDigits; higher priority than fractionDigits

Rounding priority for number formatting when both significantDigits and fractionDigits are set; uses the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingPriority

Rounding mode for number formatting, using the browser's Intl.NumberFormat, following the same rules as Intl.NumberFormat's roundingMode

Axis tick label

Whether the label is visible

LabelColor

Label font size

Label font weight

Label rotation angle

Axis line

Whether the axis line is visible

Axis line color

Axis line width

Axis tick

Whether the tick is visible

Whether the tick is oriented inward

Tick color

Tick size

Axis title

Whether the title is visible

Title text, defaults to the field configuration

Title color

Title font size

Title font weight

Axis grid line

Grid line color

Grid line width

Grid line dash type

Axis animation configuration

Animation duration

Animation easing function

Vertical indicator line

Vertical indicator line displayed when hovering over the chart

Crosshair configuration, used for displaying crosshair lines (indicator lines) on the chart

Whether to display crosshairs

Crosshair line color

Crosshair label color

Whether to display the crosshair label

Crosshair label background color

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

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

Sort order, supports 'asc' or 'desc'

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

Custom sort order, applied directly to the category axis

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

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

Sort order, supports 'asc' or 'desc'

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

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

Chart theme; theme is a lower-priority configuration that includes common styles shared across all chart types, as well as chart-specific configurations shared across a single category.

Built-in light and dark themes; users can define custom themes via the Builder.

Theme

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

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

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

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

MarkPoint configuration; according to the selected data, defines the annotation points in the chart, including position, format, style, etc.

MarkPoint selector, used to select data points.

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

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

Annotation text

Text color

Text font size

Text font weight

Text alignment; generally set to 'right' to ensure the text is displayed on the left of the mark point and within the visible area of the chart.

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

right: Text is on the left of the mark point, aligned to the mark point by its right edge.

left: Text is on the right of the mark point, aligned to the mark point by its left edge.

center: Text is centered on the mark point.

Text vertical alignment; generally set to 'top' to ensure the text is displayed below the mark point and within the visible area.

Recommended to set to 'top' to ensure the text is displayed completely within the visible area.

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

middle: Text is vertically centered on the mark point.

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

Background visible

Background color

Background border color

Background border width

Background border radius

Background padding

Vertical offset distance of the annotation point. When the point is above the chart (high values), a positive value is recommended; when below (low values), a negative value is recommended.

A negative value offsets it upward (e.g., -10 pixels).

A positive value offsets it downward (e.g., 10 pixels).

Horizontal offset distance of the annotation point. When the point is at the left (category axis start), a positive value is recommended; when at the right (category axis end), a negative value is recommended.

A negative value offsets it to the left (e.g., -10 pixels).

A positive value offsets it to the right (e.g., 10 pixels).

Dimension value mark line, displayed vertically; allows setting the position and style of the mark line.

Fixed x-value for vertical mark lines; if the category axis is on the x-direction, you can enter a dimension value; if it's a numeric axis, enter a specific number.

Dynamic filter (AI-generated code execution)

Calculate mark line value via AI-generated JavaScript code.

Suitable for cases where mark line positions need to be determined dynamically based on data, such as mean, maximum, quantile, 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 numeric or string value: number | string

- Applicable scenario: Dynamic values needed for mark lines (horizontal lines, vertical lines)

- 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, MarkLine's label position (relative to the line).

Text color

Text font size

Text font weight

Text alignment; generally no need to set.

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

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

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

center: Text is centered on the reference line.

Text vertical alignment; generally no need to set.

Recommended to set to 'top' to ensure the text is displayed completely within the visible area.

top: Text is below the reference line, aligned to the endpoint of the (vertical) mark line by its top edge.

middle: Text is centered horizontally relative to the endpoint of the (vertical) mark line.

bottom: Text is above the reference line, aligned to the endpoint of the (vertical) mark line by its bottom edge.

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, etc.), displayed horizontally. Allows setting the position and style of the mark line. Use this configuration if you need to draw mark lines corresponding to specific values like the mean.

Fixed y-value for horizontal mark lines; if the category axis is on the y-direction, you can enter a dimension value; if it's a numeric axis, enter a specific number.

Dynamic filter (AI-generated code execution)

Calculate mark line value via AI-generated JavaScript code.

Suitable for cases where mark line positions need to be determined dynamically based on data, such as mean, maximum, quantile, 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 numeric or string value: number | string

- Applicable scenario: Dynamic values needed for mark lines (horizontal lines, vertical lines)

- 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

MarkLine's label position (relative to the line).

Text color

Text font size

Text font weight

Text alignment; generally no need to set.

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

right: Text is on the left of the reference line, its right edge aligned (horizontally) with the endpoint of the mark line.

left: Text is on the right of the reference line, its left edge aligned (horizontally) with the endpoint of the mark line.

center: Text is centered (horizontally) relative to the endpoint of the mark line.

Text vertical alignment; generally no need to set.

Recommended to set to 'top' to ensure the text is displayed completely within the visible area of the chart.

top: Text is below the reference line, its top edge aligned (horizontally) with the mark line.

middle: Text is centered (horizontally) relative to the mark line.

bottom: Text is above the reference line, its bottom edge aligned (horizontally) with the mark line.

Background visible

Background color

Background border color

Background border width

Background border radius

Background padding

Line visible

Line color

Line width

Line style

Whether to enable the function to split the main line into two segments.

Main color for the portion greater than the mark value

Main color for parts less than the mark value

Mark area

Mark area configuration, according to the selected data, defines the annotation areas in the chart, including position and style.

Depends on the selected data for marking.

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

Annotation text

Text position

Text color

Text font size

Text font weight

Text alignment; generally set to 'right' to ensure the text is displayed in the middle of the mark area and within the visible range.

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

right: Text is on the left of the mark area, its right edge aligned with the area.

left: Text is on the right of the mark area, its left edge aligned with the area.

center: Text is centered within the mark area.

Text vertical alignment; generally set to 'top' to ensure the text is at the bottom of the mark area and within the visible range.

Recommended to set to 'top' to ensure the text is displayed completely within the visible area.

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

middle: Text is vertically centered within the mark 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

Difference annotation line

Draws a difference annotation line from two selected data points and automatically calculates the difference text.

Start anchor for the difference annotation line.

Difference annotation anchor configuration, used to select the data bound to the start or end point.

Anchor selector, which must ultimately locate a logical anchor.

Dimension field, the id of one item in dimensions

Operator

- in: select data items whose dimension field value is in value

- not in: select data items whose dimension field value is not in value

Operator

- in: select data items whose dimension field value is in value

- not in: select data items whose dimension field value is not in value

Same as operator

Value of the dimension field used to select data items; arrays are supported

End anchor for the difference annotation line.

Difference annotation anchor configuration, used to select the data bound to the start or end point.

Anchor selector, which must ultimately locate a logical anchor.

Dimension field, the id of one item in dimensions

Operator

- in: select data items whose dimension field value is in value

- not in: select data items whose dimension field value is not in value

Operator

- in: select data items whose dimension field value is in value

- not in: select data items whose dimension field value is not in value

Same as operator

Value of the dimension field used to select data items; arrays are supported

Difference value type.

• absolute: displays the absolute difference, calculated as end - start

• percent: displays the percentage difference, calculated as (end - start) / start :::

#textFontSize

Type: number | undefined

:::note{title=Description} Text font size.

Text color.

Text background color.

Line color.

Line style.

Whether to enable the dimension linkage function when the chart has perspective enabled or measures are combined.

When hovering over certain dimension value(s), it highlights data with the same dimension values in other sub-charts.

Perspective chart dimension linkage configuration

Whether to enable perspective chart dimension linkage

Whether to display tooltips for all dimension sub-charts

Whether to display crosshair labels

Language

Chart language configuration; supports 'zh-CN' and 'en-US' language; alternatively, call the intl.setLocale('zh-CN') method to set the language.