#ColumnParallel

Bar Chart, suitable for parallel comparison scenarios of multiple measures, where multiple bars are displayed side-by-side to show different measure values

Applicable scenarios:

- Parallel comparison of multiple measures under the same dimension

- Horizontal comparison of multi-dimensional data

- Correlation analysis between measures

Bar Chart, suitable for parallel comparison scenarios of multiple measures

Dataset: A dataset that conforms to the TidyData specification and has been aggregated, used to define the chart's data source and structure. User input does not require any processing; VSeed features powerful data reshaping capabilities that handle the transformation automatically. The final data for the Bar Chart will be converted into 2 dimension(s) and 1 measure(s).

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: All measures in the Bar Chart are automatically merged into a single measure and mapped to the Y-axis. When multiple measures exist, the 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 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, 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 the percentage of measure values

In multi-measure scenarios, there is no concern about conflicting values, because all plot-related measures go through foldMeasures processing and are merged into one measure representing a single data point

Note: encoding's label has higher priority; this config does not affect encoding's label

Whether labels display dimension labels

Display all dimension labels

Note: encoding's label has higher priority; this config does not affect encoding's label

Whether label values are automatically formatted; when autoFormat is true, numFormat configuration is ignored

Label value format configuration; merged with the format in measure, where measure's format has higher priority. numFormat priority is lower than autoFormat

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

Number format ratio, cannot be 0

Number format symbol, e.g. %, ‰

Thousands separator for number formatting

Number format suffix

Number format prefix

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

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

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

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

Label font size

Label font weight

Label background color

Label stroke color

Label font color

Whether labels automatically invert font color based on the color of graphic elements

label position

Whether label collision avoidance is enabled

Label filtering; the default relationship between selectors is "Or"

Dimension field, the ID of an item in dimensions

Operator

- in: Select data items where the 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 by dimension field value; supports arrays

Animated filter (AI-generated code execution)

Implements complex data filtering logic using AI-generated JavaScript code

Key capabilities:

- Supports any complex data filtering conditions

- Uses built-in utility functions for data manipulation

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

Environment requirements: Only supports browser environments; fallback will be used in Node.js environments

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

Chart animated filter configuration

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

User's filtering requirement description (natural language)

AI-generated JavaScript filtering code

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

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

- Must return an array of objects combining row indices and fields: 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

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

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

Dimension field, the ID of an item in dimensions

Operator

- in: Select data items where the 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 by dimension field value; supports arrays

Animated filtering execution result (runtime field)

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

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

Whether legend functionality is enabled

Whether the legend border is enabled

legendfontColor

Pagination icon color

Pagination icon disabled color

Legend font size

legendfontColor

Legend font weight

Legend shape

Legend position

Maximum number of columns or rows when there are many legends

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

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

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

Whether tooltip functionality is enabled

Brush selection

Brush selection configuration, used to enable/disable brush functionality

Chart brush selection configuration

Whether to enable brush selection

Brush type

Defines the shape and orientation of the brush selection box

- rect: Rectangular selection, allowing simultaneous selection in both X and Y directions

- polygon: Polygonal selection, allowing the drawing of arbitrary polygons by clicking multiple points

- x: X-axis selection, restricts selection to the X-axis direction

- y: Y-axis selection, restricts selection to the Y-axis direction

Selection mode: single or multiple

Defines the brush selection mode

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

- multiple: Multiple selection mode, multiple brush boxes can coexist

Whether to clear the selection box after brush ends

Style for selected data items

Defines the style of data points within the brush selection

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

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 its position, format, style, etc.

Whether the axis is visible

Whether the axis is reversed; effective only for numeric axes

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

Axis label auto-hide; if two labels overlap (distance less than autoHideGap), the overlapping label is hidden. Effective only for category axes.

Axis label auto-hide interval; if the distance between two text labels is less than autoHideGap, the overlapping label is hidden. Effective only for category axes.

When auto-hide is enabled, autoHide is used, set on autoHideSeparation on

When auto-hide is disabled, sampling is used, set on minGap on

Axis label auto-rotation; when label width exceeds axis length, labels rotate automatically. Effective only for category axes.

Axis label auto-rotation angle range; defines the rotation range when auto-rotation is enabled. Effective only for category axes.

Axis label auto-truncation; when label width exceeds axis length, the excess is replaced by an ellipsis. Full label is visible on hover. Effective only for category axes.

Axis label maximum auto-truncation length; if the label exceeds this length, it is truncated with an ellipsis. Effective only for category axes.

X-axis tick label

Whether the label is visible

LabelColor

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 inward

Tick color

Tick size

X-axis title

Whether the title is visible

Title text; defaults to field configuration

Title color

Title font size

Title font weight

X-axis grid 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 its position, format, style, etc.

Whether the axis is visible

Axis minimum value; has higher priority than nice and zero

Axis maximum value; has higher priority than nice and zero. If set to true, the maximum is automatically calculated based on the data range.

Whether to use a logarithmic axis; effective only for numeric axes

The base of the logarithmic axis; effective only for numeric axes

Whether to automatically adjust the axis scale interval to make tick labels more readable; this configuration is ignored if min and max are set. Effective only for numeric axes.

Whether the axis is reversed; effective only for numeric axes

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

Whether to automatically format the tick labels of numeric axes; if autoFormat is true, the numFormat configuration is ignored. Effective only for numeric axes.

Number formatting for numeric axes; effective only 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

LabelColor

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 inward

Tick color

Tick size

Y-axis title

Whether the title is visible

Title text; defaults to 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 its color, label style, etc.

Crosshair rectangle configuration used to define the area for displaying crosshairs in the chart

Whether to show the crosshair rectangle area

Crosshair rectangle area color

Crosshair rectangle area label color

Whether to show the crosshair rectangle area label

Crosshair rectangle area label background color

Bar Chart stacking corner radius

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

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

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

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

sort order, optional values 'asc' or 'desc'

sorting field, can be a dimension ID or measure ID

Custom sort order to be applied directly to the category axis

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

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

sort order, optional values 'asc' or 'desc'

sorting field, can be a dimension ID or measure ID

Custom sort order to be 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 low-priority configuration containing general configurations shared across all chart types and specific ones for individual classes. Built-in light and dark themes are available; users can also customize themes via the Builder.

Theme

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

Rectangular element style: Bar Chart configuration used to define the side-by-side bar style, 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: numeric selector, local data selector, conditional dimension selector, and conditional measure selector.

If no selector is configured, the style is applied globally.

Data selector

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

If no selector is configured, the style is applied globally.

Dimension field, the ID of an item in dimensions

Operator

- in: Select data items where the 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 by dimension field value; supports arrays

Animated filter (AI-generated code execution)

Implements complex data filtering logic using AI-generated JavaScript code

Suitable for scenarios where static selectors are difficult to express, such as Top N, statistical analysis, or complex conditions.

Key capabilities:

- Supports any complex data filtering conditions

- Uses built-in utility functions for data manipulation

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

Environment requirements: Only supports browser environments; fallback will be used in Node.js environments

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

Chart animated filter configuration

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

User's filtering requirement description (natural language)

AI-generated JavaScript filtering code

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

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

- Must return an array of objects combining row indices and fields: 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

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

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

Dimension field, the ID of an item in dimensions

Operator

- in: Select data items where the 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 by dimension field value; supports arrays

Animated filtering execution result (runtime field)

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

Whether the bar element (rectangular element) is visible

Bar element (rectangular element) color

Bar element (rectangular element) color opacity

Bar element (rectangular element) border color

Bar element (rectangular element) border width

Bar element (rectangular element) border style

Bar element (rectangular element) corner radius

Bar element (rectangular element) stroke opacity

Mark point

Mark point configuration; defines mark points based on selected data, including their position, format, style, etc.

Mark point selector, used to select data points.

Dimension field, the 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 data items by dimension field value; supports arrays

Animated filter (AI-generated code execution)

Implements complex data filtering logic using AI-generated JavaScript code

Suitable for scenarios where static selectors are difficult to express, such as Top N, statistical analysis, or complex conditions.

Key capabilities:

- Supports any complex data filtering conditions

- Uses built-in utility functions for data manipulation

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

Environment requirements: Only supports browser environments; fallback will be used in Node.js environments

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

Chart animated filter configuration

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

User's filtering requirement description (natural language)

AI-generated JavaScript filtering code

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

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

- Must return an array of objects combining row indices and fields: 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

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

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

Dimension field, the ID of an item in dimensions

Operator

- in: Select data items where the 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 by dimension field value; supports arrays

Animated filtering 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, setting it to 'right' displays the text to the left of the mark point, ensuring it remains within the visible area of the chart.

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

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

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

center: Text is at the center of the mark point.

Text vertical alignment; generally, setting it to 'top' displays the text at the bottom of the mark point, ensuring it remains within the visible area of the chart.

It is recommended to set it to 'top' to ensure the text is fully displayed within the visible area.

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

middle: Text is at the center of the mark point.

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

Background visible

Background color

Background border color

Background border width

Background border corner radius

Background padding

Pixel offset of the entire mark point in the Y direction. When the mark point is above the chart (larger values), a positive value is recommended; when below (smaller values), a negative value is recommended.

Negative values offset upwards; e.g., -10 moves the entire mark point component (including text and background) up by 10 pixels.

Positive values offset downwards; e.g., 10 moves the entire component down by 10 pixels.

Pixel offset of the entire mark point in the X direction. When the mark point is on the left side (start of category axis), a positive value is recommended; when on the right side (end), a negative value is recommended.

Negative values offset to the left; e.g., -10 moves the entire component left by 10 pixels.

Positive values offset to the right; e.g., 10 moves the entire component right by 10 pixels.

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

Fixed X value used for vertical mark lines. If the category axis is on the X direction, enter a dimension value; if the numeric axis is on the X direction, enter a specific numeric value.

Animated filter (AI-generated code execution)

Calculates the mark line value dynamically via AI-generated JavaScript code.

Suitable for scenarios requiring dynamic determination of mark line positions based on data, such as average, maximum, quantiles, or business lines.

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 (access via _ or R)

- Input parameters: data (array)

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

- Applicable scenarios: Animated values required for mark lines (horizontal or vertical lines)

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

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

Animated filtering execution result (runtime field)

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

Annotation text

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

Text color

Text font size

Text font weight

Text alignment; generally no configuration needed.

It is recommended to set it to 'right' to ensure the text is on the left side of the mark line.

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

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

center: Text is at the center of the reference line (for vertical lines).

Text vertical alignment; generally no configuration needed.

It is recommended to set it to 'top' to ensure the text is fully displayed within the visible area.

top: Text is at the bottom of the reference line, aligned with the top edge (for vertical lines).

middle: Text is at the center of the reference line (for vertical lines).

bottom: Text is at the top of the reference line, aligned with the bottom edge (for vertical lines).

Line visible

Line color

Line width

Line style

Background visible

Background color

Background border color

Background border width

Background border corner radius

Background padding

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

Fixed Y value used for horizontal mark lines. If the category axis is on the Y direction, enter a dimension value; if the numeric axis is on the Y direction, enter a specific numeric value.

Animated filter (AI-generated code execution)

Calculates the mark line value dynamically via AI-generated JavaScript code.

Suitable for scenarios requiring dynamic determination of mark line positions based on data, such as average, maximum, quantiles, or business lines.

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 (access via _ or R)

- Input parameters: data (array)

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

- Applicable scenarios: Animated values required for mark lines (horizontal or vertical lines)

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

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

Animated filtering execution result (runtime field)

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

Annotation text

Text position

Position of the mark line's label (relative to the line).

Text color

Text font size

Text font weight

Text alignment; generally no configuration needed.

It is recommended to set it to 'right' to ensure the text is on the left side of the mark line.

right: Text is on the left of the reference line, aligned with its right edge (at the end of horizontal mark lines).

left: Text is on the right of the reference line, aligned with its left edge (at the end of horizontal mark lines).

center: Text is at the center of the reference line (at the end of horizontal mark lines).

Text vertical alignment; generally no configuration needed.

It is recommended to set it to 'top' to ensure the text is fully displayed within the visible area.

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

middle: Text is at the center of the reference line (for horizontal lines).

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

Background visible

Background color

Background border color

Background border width

Background border width

Background border corner radius

Background padding

Line visible

Line visible

Line color

Line width

Line style

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

Main color for the portion greater than the mark value.

Main color for the portion less than the mark value.

Mark Area

Mark area configuration; defines the mark area based on selected data, including position, style, etc.

Depends on selected data for data marking.

Dimension field, the 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 data items by dimension field value; supports arrays

Annotation text

Text position

Text color

Text font size

Text font weight

Text alignment; generally, setting it to 'right' displays the text in the middle of the mark area, ensuring it remains within the visible area.

It is recommended to set it to 'center' to ensure the text is in the middle of the mark area.

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

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

center: Text is at the center of the mark area.

Text vertical alignment; generally, setting it to 'top' displays the text at the bottom of the mark area, ensuring it remains within the visible area.

It is recommended to set it to 'top' to ensure the text is fully displayed within the visible area.

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

middle: Text is at the center of the mark area.

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

Background visible

Background color

Background border color

Background border color

Background border width

Background border corner radius

Background border corner radius

Background padding

Mark area color

Mark area color opacity

Mark area border color

Mark area border width

Mark area border corner radius

Mark area border line style

Mark area margin

Whether to enable the dimension linkage function when the chart is in pivot mode or when measures are combined.

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

Whether to display the label corresponding to the crosshair.

Language

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