#BarParallel

Parallel bar chart, suitable for horizontal parallel comparison scenarios of multiple measures, where multiple bars are sorted in parallel to display different measure values.

Applicable scenarios:

• Multi-measure comparison when category names are long.

• Horizontal comparison displaying ranking and values simultaneously.

• Parallel analysis of multi-dimensional data.

Parallel bar chart, suitable for horizontal parallel comparison of multiple measures.

Data source; an aggregated dataset conforming to the TidyData specification, used to define the chart's data source and structure. Users don't need to process the dataset beforehand as VSeed features powerful data reshaping capabilities to automatically handle it; parallel bar chart data will eventually be converted to 2 dimensions and 1 measure.

Dimensions; the first dimension is mapped to the Y-axis, while other dimensions are merged with measure names (when multiple measures exist) to be 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

• yAxis: Supports mapping multiple dimensions to the Y-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; parallel bar chart measures are automatically merged into one measure and mapped to the X-axis. When multiple measures exist, measure names are merged with other dimensions to be 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.97万

- 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

- xAxis: measure mapped to the x-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; 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

Continuous color scheme

Manual color mapping

Color for positive values

Color for negative values

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

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 its font color based on the graphical element's color.

Label position

Whether to enable the label overlap prevention feature.

Label filtering; the default relationship between multiple selectors is OR.

Dimension field ID (the id of an item in dimensions).

Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array.

Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array.

Same as operator.

Selected dimension field values; supports arrays.

Dynamic filter (executes AI-generated code)

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

Core capabilities:

• Supports arbitrary complex data filtering conditions.

• Uses built-in utility functions for data manipulation.

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

Environment requirements: Only supported in browser environments; Node.js environments will use the fallback.

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

Chart dynamic filter configuration: filters chart marks (bars, points, etc.) via AI-generated JavaScript code.

User's filtering requirement description (natural language).

AI-generated JavaScript filtering code:

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

• Input parameter: 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 data item's row number, and field represents the field to highlight.

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

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

Dimension field ID (the id of an item in dimensions).

Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array.

Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array.

Same as operator.

Selected dimension field values; 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 to enable the legend feature.

Whether to show the legend border.

Legend font color

Pager icon color

Pager icon disabled color

Legend font size

Legend font color

Legend font weight

Legend shape

Legend position

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

If the position is horizontal (bottom, top, etc.), maxSize controls the number of columns.

If the position is vertical (left, right, etc.), maxSize controls the number of rows.

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

Whether to enable the tooltips feature.

Brush

Brush configuration used to enable/disable and configure the brush selection capability.

Chart brush configuration.

Whether to enable brush selection.

Brush type; defines the shape and direction of the selection area.

• rect: Rectangular brush, allows selection along both X and Y axes simultaneously.

• polygon: Polygonal brush, allows selection of an arbitrary polygon by clicking multiple points.

• x: X-axis brush, restricts selection to the horizontal direction.

• y: Y-axis brush, restricts selection to the vertical direction. :::

#brushMode

Type: "single" | "multiple" | undefined

:::note{title=Description} Brush mode; defines whether single or multiple areas can be selected.

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

• multiple: Multiple selection mode, multiple brush areas can exist simultaneously. :::

#removeOnClick

Type: boolean | undefined

:::note{title=Description} Whether to clear the selection area upon a click after the brush ends.

Style for data items within the brush selection.

Defines the style of data points captured by the brush.

Opacity for selected data items (range: 0-1).

Stroke color

Stroke width

Style for data items outside the brush selection.

Defines the style of data points not captured by the brush.

Opacity for unselected data items (range: 0-1).

Stroke color

Stroke width

X-axis (numeric axis) configuration used to define the X-axis, including position, format, style, etc.

Whether the axis is visible.

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

Maximum value of the axis; has higher priority than nice and zero. If true, the maximum value is automatically calculated based on the data range.

Whether to use a logarithmic scale (only effective for numeric axes).

The base of the logarithm (only effective for numeric axes).

Whether to automatically adjust the axis scale interval for better readability. This setting is ignored if min and max are configured. Only effective for numeric axes.

Whether to reverse the axis (only effective for numeric axes).

Whether to force the axis to include zero. This setting is ignored if min and max are configured. Only effective for numeric axes.

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

Numerical formatting for the axis. Only effective for numeric axes. 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

X-axis tick label

Whether the label is visible.

Label color

Label font size

Label font weight

Label rotation angle

X-axis line

Whether the axis line is visible.

Axis line color

Axis line width

X-axis tick

Whether the tick is visible.

Whether the tick points inward.

Tick color

Tick size

X-axis title

Whether the title is visible.

Title text, defaults to the field configuration.

Title color

Title font size

Title font weight

X-axis grid line

Grid line color

Grid line width

Grid line type

Y-axis animation configuration.

Animation duration

Animation easing function.

Y-axis (categorical axis) configuration used to define the Y-axis, including position, format, style, etc.

Whether the axis is visible.

Whether the axis is reversed (only effective for numeric axes).

Whether to force show 0 on the axis; ignored if min and max are configured (only effective for numeric axes).

Whether to automatically hide overlapping labels. If two labels overlap (distance less than autoHideGap), the label causing the overlap is hidden (only effective for categorical axes).

Target gap for automatic label hiding. If the gap between two text labels is smaller than autoHideGap, the label causing the overlap is hidden. Only effective for categorical axes.

• When autoHide is enabled, this sets the autoHideSeparation.
• When autoHide is disabled, this sets the minGap for sampling. :::

#labelAutoRotate

Type: boolean | undefined

:::note{title=Description} Whether to automatically rotate labels when their width exceeds the axis length (only effective for categorical axes).

Range of angles for automatic rotation when enabled (only effective for categorical axes).

Whether to automatically limit label length. When label width exceeds the axis length, the excess is truncated with an ellipsis. The full label is visible on hover (only effective for categorical axes).

Maximum length for label limiting. When text length exceeds this value, it is truncated with an ellipsis and visible on hover (only effective for categorical axes).

Y-axis tick label

Whether the label is visible.

Label color

Label font size

Label font weight

Label rotation angle

Y-axis line

Whether the axis line is visible.

Axis line color

Axis line width

Y-axis tick

Whether the tick is visible.

Whether the tick points inward.

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 line

Grid line color

Grid line width

Grid line type

Y-axis animation configuration.

Animation duration

Animation easing function.

Crosshair rectangle configuration. Used to define the color and label style of the crosshair rectangle area in the chart.

Whether to show the crosshair rectangle area.

Color of the crosshair rectangle area.

Label color for the crosshair rectangle area.

Whether to show the label for the crosshair rectangle area.

Background color for the crosshair rectangle label.

Corner radius for stacked bars in a bar chart.

Maximum height of the rectangle (can be a pixel value or a percentage string).

The distance between rectangles within the same category (can be a pixel value or a percentage string).

Sort configuration for categorical axes, supports sorting based on dimensions or measures, as well as custom sort orders.

Sort order, can be 'asc' or 'desc'.

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

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

Legend sort configuration, supports sorting based on dimensions or measures, as well as custom sort orders. Sort arrays follow a left-to-right or top-to-bottom order.

Sort order, can be 'asc' or 'desc'.

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

Custom sort order; this order will be directly applied to the legend. Ascending: left to right or top to bottom; Descending: right to left or bottom to top.

Chart theme. Themes are low-priority configuration options including general settings shared by all chart types and specific settings shared within a single chart type. Built-in 'light' and 'dark' themes are available; users can also define custom themes via the Builder or registerTheme.

Bar mark style. Configuration used to define bar styles, including color, borders, corner radius, etc. Supports global styling or conditional style configurations.

Data selector. If configured, provides four types of matching capabilities: value selector, partial data selector, conditional dimension selector, and conditional measure selector. If not configured, styling applies globally.

Dimension field ID (the id of an item in dimensions).

Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array.

Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array.

Same as operator.

Selected dimension field values; supports arrays.

Dynamic filter (executes AI-generated code)

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

Suitable for scenarios complex for static selectors, such as Top N, statistical analysis, or complex combined conditions.

Core capabilities:

• Supports arbitrary complex data filtering conditions.

• Uses built-in utility functions for data manipulation.

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

Environment requirements: Only supported in browser environments; Node.js environments will use the fallback.

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

Chart dynamic filter configuration: filters chart marks (bars, points, etc.) via AI-generated JavaScript code.

User's filtering requirement description (natural language).

AI-generated JavaScript filtering code:

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

• Input parameter: 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 data item's row number, and field represents the field to highlight.

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

Example Highlight the sales field of data items where sales are greater than 1000:

const filtered = _.filter(data, item => item.sales > 1000);
return _.map(filtered, item => ({
  __row_index: item.__row_index,
  field: 'sales'
}));

Highlight the data item with the highest profit margin in each region:

const grouped = _.groupBy(data, 'area');
const maxItems = _.map(grouped, group =>
  _.maxBy(group, item => item.profit / item.sales)
);
return _.flatten(
  _.map(maxItems, item => [
    { __row_index: item.__row_index, field: 'product' },
    { __row_index: item.__row_index, field: 'profit' }
  ])
);

Highlight data items meeting multiple conditions:

const filtered = _.filter(data, item => {
  const profitRate = item.profit / item.sales;
  return profitRate > 0.2 && item.sales > 5000;
});
return _.flatten(
  _.map(filtered, item => [
    { __row_index: item.__row_index, field: 'product' },
    { __row_index: item.__row_index, field: 'sales' }
  ])
);

#fallback

Type: Selector | Selectors | undefined

:::note{title=Description} Fallback plan when code execution fails or the environment is not supported.

Dimension field ID (the id of an item in dimensions).

Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array. :::

#op

Type: "in" | "not in" | undefined

:::note{title=Description} Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array.

Same as operator.

Selected dimension field values; supports arrays.

Dynamic filter execution result (runtime field)

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

Whether the bar mark (rectangle) is visible.

Bar color

Bar color opacity.

Bar border color.

Bar border width.

Bar border style.

Bar corner radius.

Bar stroke opacity.

Annotation point configuration. Used to define chart annotation points based on selected data, including their position, format, style, etc.

Selector for the annotation point, used to pick data items.

Dimension field ID (the id of an item in dimensions).

Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array. :::

#op

Type: "in" | "not in" | undefined

:::note{title=Description} Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array.

Same as operator.

Selected dimension field values; supports arrays.

Dynamic filter (executes AI-generated code)

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

Suitable for scenarios complex for static selectors, such as Top N, statistical analysis, or complex combined conditions.

Core capabilities:

• Supports arbitrary complex data filtering conditions.

• Uses built-in utility functions for data manipulation.

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

Environment requirements: Only supported in browser environments; Node.js environments will use the fallback.

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

Chart dynamic filter configuration: filters chart marks (bars, points, etc.) via AI-generated JavaScript code.

User's filtering requirement description (natural language).

AI-generated JavaScript filtering code:

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

• Input parameter: 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 data item's row number, and field represents the field to highlight.

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

Example Highlight the sales field of data items where sales are greater than 1000:

const filtered = _.filter(data, item => item.sales > 1000);
return _.map(filtered, item => ({
  __row_index: item.__row_index,
  field: 'sales'
}));

Highlight the data item with the highest profit margin in each region:

const grouped = _.groupBy(data, 'area');
const maxItems = _.map(grouped, group =>
  _.maxBy(group, item => item.profit / item.sales)
);
return _.flatten(
  _.map(maxItems, item => [
    { __row_index: item.__row_index, field: 'product' },
    { __row_index: item.__row_index, field: 'profit' }
  ])
);

Highlight data items meeting multiple conditions:

const filtered = _.filter(data, item => {
  const profitRate = item.profit / item.sales;
  return profitRate > 0.2 && item.sales > 5000;
});
return _.flatten(
  _.map(filtered, item => [
    { __row_index: item.__row_index, field: 'product' },
    { __row_index: item.__row_index, field: 'sales' }
  ])
);

#fallback

Type: Selector | Selectors | undefined

:::note{title=Description} Fallback plan when code execution fails or the environment is not supported.

Dimension field ID (the id of an item in dimensions).

Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array. :::

#op

Type: "in" | "not in" | undefined

:::note{title=Description} Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array.

Same as operator.

Selected dimension field values; 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 set to 'right'; text is displayed on the left side of the annotation point to ensure it remains within the visible area of the chart.

Suggested to be set to 'right' to ensure text stays on the left of the point.

• right: Text is on the left of the point, with the right edge aligned to the point.
• left: Text is on the right of the point, with the left edge aligned to the point.
• center: Text is centered on the point. :::

Example 'right' (text is on the left side of the point)

#textBaseline

Type: "top" | "bottom" | "middle" | undefined

:::note{title=Description} Text baseline. Generally set to 'top'; text is displayed at the bottom of the annotation point to ensure it remains within the visible area of the chart.

Suggested to be set to 'top' to ensure the label is fully visible.

• top: Text is at the bottom of the point, with the top edge aligned to the point.
• middle: Text is centered vertically on the point.
• bottom: Text is at the top of the point, with the bottom edge aligned to the point. :::

Example 'top' (text is at the bottom of the annotation point)

#textBackgroundVisible

Type: boolean | undefined

:::note{title=Description} Background visibility.

Background color.

Background border color.

Background border width.

Background border radius.

Background padding.

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

A negative value shifts the whole component (text, background, etc.) upwards. For example, -10 shifts it up by 10 pixels.

A positive value shifts the whole component downwards. For example, 10 shifts it down by 10 pixels.

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

A negative value shifts the whole component (text, background, etc.) to the left. For example, -10 shifts it left by 10 pixels.

A positive value shifts the whole component to the right. For example, 10 shifts it right by 10 pixels.

Numeric annotation line (including average line, maximum line, minimum line, etc.), displayed vertically. Used to set the position, style, etc. of the annotation line. use this configuration to draw annotation lines corresponding to numerical values like the average.

Fixed X-value for the vertical annotation line. If the categorical axis is in the X direction, a dimension value can be input; if a numeric axis is in the X direction, a specific numeric value can be used.

Dynamic filter (executes AI-generated code)

Dynamically calculates annotation line values via AI-generated JavaScript code.

Suitable for scenarios requiring dynamic determination of annotation line positions based on data, such as averages, maximums, quantiles, business lines, etc.

Only supported in browser environments (requires Web Worker).

User's filtering requirement description (natural language).

AI-generated JavaScript filtering code:

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

• Input parameter: data (Array).

• Must return a single numeric or string value: number | string.

• Suitable for dynamic values needed by 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 location of the annotation line's label (relative to the line).

Text color.

Text font size.

Text font weight.

Text alignment. Generally set to 'right'; text is displayed on the left side of the annotation line to ensure it remains within the visible area of the chart.

Suggested to be set to 'right' to ensure text stays on the left of the line.

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

Example 'right'

#textBaseline

Type: "top" | "bottom" | "middle" | undefined

:::note{title=Description} Text baseline. Generally set to 'top'; text is displayed at the bottom of the annotation line to ensure it remains within the visible area of the chart.

Suggested to be set to 'top' to ensure the label is fully visible.

• top: Text is at the bottom of the reference line, with the top edge aligned to the endpoint of the (vertical) annotation line.
• middle: Text is vertically centered on the reference line.
• bottom: Text is at the top of the reference line, with the bottom edge aligned to the endpoint of the (vertical) annotation line. :::

Example 'top'

#lineVisible

Type: boolean | undefined

:::note{title=Description} Line visibility.

Line color.

Line width.

Line style.

Background visibility.

Background color.

Background border color.

Background border width.

Background border radius.

Background padding.

Dimension value annotation line, displayed horizontally. Used to set the position, style, etc. of the annotation line.

Fixed Y-value for the horizontal annotation line. If the categorical axis is in the Y direction, a dimension value can be input; if a numeric axis is in the Y direction, a specific numeric value can be used.

Dynamic filter (executes AI-generated code)

Dynamically calculates annotation line values via AI-generated JavaScript code.

Suitable for scenarios requiring dynamic determination of annotation line positions based on data, such as averages, maximums, quantiles, business lines, etc.

Only supported in browser environments (requires Web Worker).

User's filtering requirement description (natural language).

AI-generated JavaScript filtering code:

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

• Input parameter: data (Array).

• Must return a single numeric or string value: number | string.

• Suitable for dynamic values needed by annotation lines (horizontal/vertical).

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

Example Get the maximum sales value as the annotation line value:

const maxSales = _.maxBy(data, 'sales')?.sales;
return maxSales || 0;

Calculate the average for the annotation line:

const avgSales = _.meanBy(data, 'sales');
return _.round(avgSales, 2);

Get the quantile as the annotation line:

const sorted = _.sortBy(data, 'sales');
const index = Math.floor(sorted.length * 0.75);
return sorted[index]?.sales || 0;

Calculate the goal value based on conditions:

const currentYearTotal = _.sumBy(
  _.filter(data, item => item.year === 2024),
  'sales'
);
return currentYearTotal;

#fallback

Type: string | number | undefined

:::note{title=Description} 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 location of the annotation line's label (relative to the line).

Text color.

Text font size.

Text font weight.

Text alignment. Generally set to 'right'; text is displayed on the left side of the annotation line to ensure it remains within the visible area of the chart.

Suggested to be set to 'right' to ensure text stays on the left of the line.

• right: Text is on the left of the reference line, with the right edge aligned to the endpoint of the (horizontal) annotation line.
• left: Text is on the right of the reference line, with the left edge aligned to the endpoint of the (horizontal) annotation line.
• center: Text is centered on the reference line. :::

Example 'right'

#textBaseline

Type: "top" | "bottom" | "middle" | undefined

:::note{title=Description} Text baseline. Generally set to 'top'; text is displayed at the bottom of the annotation line to ensure it remains within the visible area of the chart.

Suggested to be set to 'top' to ensure the label is fully visible.

• top: Text is at the bottom of the reference line, with the top edge aligned to the (horizontal) annotation line.
• middle: Text is vertically centered on the reference line.
• bottom: Text is at the top of the reference line, with the bottom edge aligned to the (horizontal) annotation line. :::

Example 'top'

#textBackgroundVisible

Type: boolean | undefined

:::note{title=Description} Background visibility.

Background color.

Background border color.

Background border width.

Background border radius.

Background padding.

Line visibility.

Line color.

Line width.

Line style.

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

The primary color for the portion greater than the annotation value.

The primary color for the portion less than the annotation value.

Annotation area configuration. Used to define chart annotation areas based on selected data, including their position, style, etc.

Used to mark data based on selected items.

Dimension field ID (the id of an item in dimensions).

Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array. :::

#op

Type: "in" | "not in" | undefined

:::note{title=Description} Operator

• in: Select data items where the dimension field value is within the value array.

• not in: Select data items where the dimension field value is not within the value array.

same as operator

Selected dimension field values; supports arrays.

Annotation text.

Text position.

Text color.

Text font size.

Text font weight.

Text alignment. Generally set to 'center'; text is displayed in the middle of the annotation area to ensure it remains within the visible area of the chart.

Suggested to be set to 'center' to ensure text is centered within the area.

• right: Text is on the left side of the annotation area, with the right edge aligned to the area.
• left: Text is on the right side of the annotation area, with the left edge aligned to the area.
• center: Text is centered in the annotation area. :::

Example 'center' (text is in the middle of the annotation area)

#textBaseline

Type: "top" | "bottom" | "middle" | undefined

:::note{title=Description} Text baseline. Generally set to 'top'; text is displayed at the bottom of the annotation area to ensure it remains within the visible area of the chart.

Suggested to be set to 'top' to ensure the label is fully visible.

• top: Text is at the bottom of the annotation area, with the top edge aligned to the area.
• middle: Text is vertically centered in the annotation area.
• bottom: Text is at the top of the annotation area, with the bottom edge aligned to the area. :::

Example 'top' (text is at the bottom of the annotation area)

#textBackgroundVisible

Type: boolean | undefined

:::note{title=Description} Background visibility.

Background color.

Background border color.

Background border width.

Background border radius.

Background padding.

Annotation area color.

Annotation area color opacity.

Annotation area border color.

Annotation area border width.

Annotation area border radius.

Line style for the annotation area border.

Padding for the annotation area.

Whether to enable the dimension linkage feature when the chart has pivot functionality or measure combinations enabled. When hovering over a dimension value, data with the same dimension value in other charts will be highlighted in coordination.

Configuration for dimension linkage in pivot charts.

Whether to enable dimension linkage for pivot charts.

Whether to show tooltips for all sub-charts corresponding to the dimension.

Whether to show the crosshair label.

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