#ColumnPercent

Percent Column Chart, suitable for scenarios showing the proportional relationship of each category. The Y-axis displays data proportions in percentage format.

Applicable scenarios:

• Proportional comparison of data across different categories

• Composition analysis of multi-dimensional data

• Proportional change trends in time series

Percent Column Chart

Percent Column Chart, displaying the proportional relationship between categories in percentage format.

Dataset

A TidyData-compliant and already aggregated dataset used to define the chart's data source and structure. User-input datasets do not require manual processing as VSeed features powerful data reshaping capabilities and will automatically reshape the data. Percent Column Chart data will eventually be converted 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 Column Chart measures are automatically merged into one measure and mapped to the Y-axis. When multiple measures exist, the measure names will be 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 → 749.7万

- locale=en-US: 749740.264 → 749.7K

Custom number formatting for measures; automatically applied to labels and tooltips

Note: To use custom formatting, you must explicitly set autoFormat=false; otherwise autoFormat will override this config

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

Number format ratio, cannot be 0

Number format symbol, e.g. %, ‰

Thousands separator for number formatting

Number format suffix

Number format prefix

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

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

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

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

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

Number format ratio, cannot be 0

Number format symbol, e.g. %, ‰

Thousands separator for number formatting

Number format suffix

Number format prefix

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

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

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

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

Channel to which the measure is mapped

• yAxis: measure mapped to the y-axis

• detail: measure mapped to the detail channel

• color: measure mapped to the color channel

• label: measure mapped to the label channel

• tooltip: measure mapped to the tooltip channel

In flat measure configuration form, builds a tree-shaped measure group. parentId points to the id of the parent measure group, used for building the measure tree

Pagination configuration, 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

Chart background color. Defaults to a transparent background. 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 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 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 labels automatically invert font color based on the graphical element's color

label position

Whether the label overlap avoidance function is enabled

Label filtering; the default relationship between selectors is OR

Dimension field; refers to the ID of a specific dimension item

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

same as operator

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

Dynamic filter (executed by AI-generated code)

Implement complex data filtering logic using AI-generated JavaScript code

Core Capabilities:

• Supports arbitrarily complex data filtering conditions

• Use built-in utility functions for data manipulation

• Secure execution in the browser environment (Web Worker sandbox)

Environment Requirements: Only supports browser environments; Node.js environments 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.) using AI-generated JavaScript code

User's filtering requirement description (natural language)

AI-generated JavaScript filtering code

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

• Input parameters: data (array), where each item contains a __row_index field representing the row number

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

• __row_index represents the original data item's row number, and field represents the field to be highlighted

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

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

Dimension field; refers to the ID of a specific dimension item

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

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's legend, 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

Maximum number of columns or rows for the legend when there are many legend items

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

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

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

Whether tooltip functionality is enabled

Brush

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

Chart brush configuration

Whether to enable brush selection

Brush type

Defines the shape and selection direction of the brush box

• rect: Rectangular selection, allows simultaneous selection in both X and Y directions

• polygon: Polygonal selection, allows for multi-point arbitrary polygon selection

• x: X-axis selection, selection is restricted to the X-axis direction, Y-axis is unrestricted

• y: Y-axis selection, selection is restricted to the Y-axis direction, X-axis is unrestricted

Brush mode, single or multiple selection

Defines the selection mode

• single: Single selection mode, only one brush box can exist at a time

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

Whether to clear the selection box when brush ends

Style for selected data items

Defines the style of data points within the selected brush area

Opacity

Opacity of selected data points, range 0-1

Stroke color

Stroke width

Style for unselected data items

Defines the style of data points outside the selected brush area

Opacity

Opacity of unselected data points, 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 reversed; only effective for numeric axes

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

Axis labels, auto-hide. If two labels overlap (interval is smaller than autoHideGap), the label causing the overlap is automatically hidden. Only effective for category axes.

Axis labels, auto-hide interval. If the interval between two text labels is smaller than autoHideGap, the label causing the 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 labels, auto-rotate. When label width exceeds axis length, automatically rotate labels. Only effective for category axes.

Axis labels, auto-rotation angle range. When auto-rotation is enabled, this defines the label rotation angle range. Only effective for category axes.

Axis labels, auto-limit length. When label width exceeds axis length, redundant text is represented by an ellipsis. Full label is visible on hover. Only effective for category axes.

Axis labels, maximum auto-limited length. When label text length exceeds this value, redundant text is represented by an ellipsis. Full label is visible on hover. Only effective for category axes.

X-axis scale labels

Whether labels are visible

Label color

Label font size

Label font weight

Label rotation angle

X-axis line

Whether the axis line is visible

Axis line color

Axis line width

X-axis ticks

Whether ticks are visible

Whether ticks point inwards

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 lines

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

Minimum value of the axis; higher priority than nice and zero

Maximum value of the axis; 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

Base of the logarithmic axis; only effective for numeric axes

Whether to automatically adjust the axis scale intervals to make labels more readable. This setting is ignored if min and max are configured. Only effective for numeric axes.

Whether the axis is reversed; only effective for numeric axes

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

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

Number formatting for numeric axes. Only effective for numeric axes. Lower priority than autoFormat.

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

Number format ratio, cannot be 0

Number format symbol, e.g. %, ‰

Thousands separator for number formatting

Number format suffix

Number format prefix

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

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

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

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

Y-axis scale labels

Whether labels are 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 ticks

Whether ticks are visible

Whether ticks point inwards

Tick color

Tick size

Y-axis title

Whether the title is visible

Title text, defaults to the field configuration

Title color

Title font size

Title font weight

Y-axis grid lines

Grid line color

Grid line width

Grid line type

Y-axis animation configuration

Animation duration

Animation easing function

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

Crosshair rectangle area configuration, a configuration type used to display a crosshair rectangle area in the chart.

Whether to display the crosshair rectangle area

Crosshair rectangle area color

Crosshair rectangle area label color

Whether to display the crosshair rectangle area label

Crosshair rectangle area label background color

Stacking corner radius for Percent Column Chart

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

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, can be 'asc' or 'desc'

Field to sort by, can be a dimension ID or a 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 the 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 a measure ID

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

Chart theme. Theme is a low-priority configuration functionality that includes common configurations shared by all chart types and those shared within a single chart type category. Built-in 'light' and 'dark' themes are provided, and users can customize themes via Builder.

Theme

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

Graphical rectangle (bar) style, used to define the style of graphical rectangles in the chart, including color, borders, corner radius, etc.

Supports global style or conditional style configuration.

Data Filter

If selector is configured, it provides four types of data matching capabilities: numerical selector, local 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: numerical selector, local data selector, conditional dimension selector, and conditional measure selector.

If selector is not configured, the style applies globally.

Dimension field; refers to the ID of a specific dimension item

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

same as operator

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

Dynamic filter (executed by AI-generated code)

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

Applicable to Top N, statistical analysis, complex conditions, and other scenarios where static selectors are difficult to express.

Core Capabilities:

• Supports arbitrarily complex data filtering conditions.

• Use built-in utility functions for data manipulation.

• Secure execution in the browser environment (Web Worker sandbox).

Environment Requirements: Only supports browser environments; Node.js environments 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.) using AI-generated JavaScript code.

User's filtering requirement description (natural language)

AI-generated JavaScript filtering code

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

• Input parameters: data (array), where each item contains a __row_index field representing the row number

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

• __row_index represents the original data item's row number, and field represents the field to be highlighted

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

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

Dimension field; refers to the ID of a specific dimension item

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

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 graphical rectangles (bars) are visible

Graphical rectangle (bar) color

Graphical rectangle (bar) color opacity

Graphical rectangle (bar) border color

Graphical rectangle (bar) border width

Graphical rectangle (bar) border style

Graphical rectangle (bar) corner radius

Graphical rectangle (bar) stroke opacity

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

Data point selector, used to select data points for annotation.

Dimension field; refers to the ID of a specific dimension item

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

same as operator

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

Dynamic filter (executed by AI-generated code)

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

Applicable to Top N, statistical analysis, complex conditions, and other scenarios where static selectors are difficult to express.

Core Capabilities:

• Supports arbitrarily complex data filtering conditions.

• Use built-in utility functions for data manipulation.

• Secure execution in the browser environment (Web Worker sandbox).

Environment Requirements: Only supports browser environments; Node.js environments 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.) using AI-generated JavaScript code.

User's filtering requirement description (natural language)

AI-generated JavaScript filtering code

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

• Input parameters: data (array), where each item contains a __row_index field representing the row number

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

• __row_index represents the original data item's row number, and field represents the field to be highlighted

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

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

Dimension field; refers to the ID of a specific dimension item

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

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. Generally, if set to 'right', text will appear on the left side of the annotation point to ensure visibility in the chart.

Recommended setting is 'right' to ensure the text remains on the left side of the point.

right: Text is on the left side of the point; the text's right edge aligns with the point.

left: Text is on the right side of the point; the text's left edge aligns with the point.

center: Text is centered on the point; the text's center aligns with the point.

Text vertical alignment. Generally, if set to 'top', text will appear at the bottom of the point to ensure visibility in the chart.

Recommended setting is 'top' to ensure the full text is visible.

top: Text is below the point; the text's top edge aligns with the point.

middle: Text is centered on the point; the text's center aligns with the point.

bottom: Text is above the point; the text's bottom edge aligns with the point.

Whether the text background is visible

Background color

Background border color

Background border width

Background border corner radius

Background padding

Overall offset in the Y direction for the annotation point component. Set to a positive value if the point is at the top of the chart (large values) or negative if it's at the bottom (small values).

Negative values shift the entire component (text, background) upwards. For example, -10 shifts it up by 10 pixels.

Positive values shift the entire component downwards. For example, 10 shifts it down by 10 pixels.

Overall offset in the X direction for the annotation point component. Set to a positive value if the point is on the left side (category start) or negative if it's on the right side (category end).

Negative values shift the entire component (text, background) to the left. For example, -10 shifts it left by 10 pixels.

Positive values shift the entire component to the right. For example, 10 shifts it right by 10 pixels.

Dimension value annotation line, displayed vertically. Position, style, etc., can be configured.

Fixed X-value for the vertical annotation line. For category axes on the X-axis, enter a dimension value; for numeric axes, enter a specific number.

Dynamic filter (executed by AI-generated code)

Dynamically calculate the annotation line value using AI-generated JavaScript code.

Applicable for determining annotation line positions based on data, such as average, max, quantile, or target values.

Only supports browser environments (requires Web Worker).

User's filtering requirement description (natural language)

AI-generated JavaScript filtering code

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

• Input parameters: data (array)

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

• Applicable Scenarios: Dynamic values required for annotation lines (horizontal, vertical).

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

Fallback plan 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; the position of the annotation line label relative to the line.

Text color

Text font size

Text font weight

Text alignment. Generally, no manual setting is required.

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

right: Text is on the left side of the line; the text's right edge aligns with the vertical line.

left: Text is on the right side of the line; the text's left edge aligns with the vertical line.

center: Text is centered on the line; the text's center aligns with the vertical line.

Text vertical alignment. Generally, no manual setting is required.

Recommended setting is 'top' to ensure the full text remains visible in the chart.

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

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

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

Whether the line is visible

Line color

Line width

Line style

Whether text background is visible

Background color

Background border color

Background border width

Background border corner radius

Background padding

Numerical annotation line (including average, maximum, minimum lines, etc.), displayed horizontally. Position, style, etc., can be configured. Use this configuration for drawing annotation lines corresponding to values like average lines.

Fixed Y-value for the horizontal annotation line. For category axes on the Y-axis, enter a dimension value; for numeric axes, enter a specific number.

Dynamic filter (executed by AI-generated code)

Dynamically calculate the annotation line value using AI-generated JavaScript code.

Applicable for determining annotation line positions based on data, such as average, max, quantile, or target values.

Only supports browser environments (requires Web Worker).

User's filtering requirement description (natural language)

AI-generated JavaScript filtering code

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

• Input parameters: data (array)

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

• Applicable Scenarios: Dynamic values required for annotation lines (horizontal, vertical).

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

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

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

Text color

Text font size

Text font weight

Text alignment. Generally, no manual setting is required.

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

right: Text is on the left side of the line; the text's right edge aligns with the (horizontal) annotation line's end point.

left: Text is on the right side of the line; the text's left edge aligns with the (horizontal) annotation line's end point.

center: Text is centered on the line; the text's center aligns with the (horizontal) annotation line's end point.

Text vertical alignment. Generally, no manual setting is required.

Recommended setting is 'top' to ensure the full text is visible.

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

middle: Text is centered on the line; the text's center aligns with the (horizontal) annotation line.

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

Whether text background is visible

Background color

Background border color

Background border width

Background border width

Background border corner radius

Background padding

Whether the line is visible

Line is visible

Line color

Line width

Line style

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

Primary color for segments greater than the annotation value.

Primary color for segments smaller than the annotation value.

Annotation area configuration; defines marker areas on the chart based on selected data, including their position, style, etc.

Marks data based on selected items.

Dimension field; refers to the ID of a specific dimension item

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

Operator

• in: Select data items where the dimension field value is in the specified value list

• not in: Select data items where the dimension field value is NOT in the specified value list

same as operator

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

Annotation text

Text position

Text color

Text font size

Text font weight

Text alignment. Generally, if set to 'right', text will appear in the middle of the annotation area, ensuring visibility in the chart.

Recommended setting is 'center' to ensure the text remains centered within the annotation area.

right: Text is on the left side of the annotation area; the text's right edge aligns with the area.

left: Text is on the right side of the annotation area; the text's left edge aligns with the area.

center: Text is centered within the area; the text's center aligns with the area.

Text vertical alignment. Generally, if set to 'top', text will appear at the bottom of the annotation area to ensure visibility in the chart.

Recommended setting is 'top' to ensure the full text is visible.

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

middle: Text is centered within the area; the text's center aligns with the area.

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

Whether the background is visible

Background color

Background border color

Background border color

Background border width

Background border corner radius

Background border corner radius

Background padding

Annotation area color

Annotation area color opacity

Annotation area border color

Annotation area border width

Annotation area border corner radius

Annotation area border line style

Outer padding of the annotation area

Whether to enable dimension linkage in pivot charts or measure combinations.

When hovering over a dimension value, links and highlights 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 dimensions' sub-charts

Whether to show the label for the corresponding crosshair

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