#Column

Column Chart, suitable for vertical data comparison scenarios, where the X-axis is the category axis (categorical data), the Y-axis is the numeric axis (continuous data), and bars are arranged vertically

Applicable scenarios:

- When data item names are short

- When visual comparison of values across different categories is needed

- Displaying trends in time series data

Column Chart, suitable for vertical data comparison scenarios, where the X-axis is the category axis (categorical data), the Y-axis is the numeric axis (continuous data), and bars are arranged vertically

TidyData-compliant and already aggregated dataset used to define the chart's data source and structure. User-input datasets do not need pre-processing; VSeed includes powerful data reshape functionality that automatically converts data for the Column Chart into 2 dimensions and 1 measure.

The first dimension of the Column Chart is mapped to the X-axis; other dimensions will be 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

- 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

All measures of the Column Chart are automatically merged into one measure and mapped to the Y-axis. When multiple measures exist, measure names will be 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.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 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. The background color can be a color string (default is transparent), such as 'red' or 'blue', or a hex, rgb, or rgba value like '#ff0000' or '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 element color

label position

Whether label anti-overlap functionality is enabled

Label filtering, default relationship between selectors is Or

Dimension field, the ID of a dimension item

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

same as operator

Value of the dimension field, supports arrays

Animated filter (AI-generated code execution)

Implements complex data filtering logic via AI-generated JavaScript code

Core capabilities:

- Supports any complex data filtering conditions

- Uses built-in utility functions for data operations

- Safely executes in the browser environment (Web Worker sandbox)

Environment requirements: Only supports browser environment; Node.js environment will use fallback

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

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

- 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 row number of the original data item, 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 a dimension item

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

same as operator

Value of the dimension field, supports arrays

Animated filter execution result (runtime field)

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

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

Whether legend functionality is enabled

Whether the legend border is enabled

Legend font color

Pager icon color

Pager icon disabled color

Legend font size

legendfontColor

Legend font weight

Legend shape

Legend position

Maximum number of columns or rows when a large number of legends exist

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

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

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

Whether tooltip functionality is enabled

Brush Selection

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

Chart brush selection configuration

Whether to enable brush selection

Brush type

Defines the shape and direction of the brush selection box

- rect: Rectangular selection; selection can be performed in both X and Y axis directions simultaneously

- polygon: Polygonal selection; draw arbitrary polygons by clicking multiple points for selection

- x: X-axis selection; selection is performed only along the X-axis, with no restriction on the Y-axis

- y: Y-axis selection; selection is performed only along the Y-axis, with no restriction on the X-axis

Brush selection mode: single or multiple

Defines the brush selection mode

- single: Single-select mode; only one selection box can exist at a time

- multiple: Multi-select mode; multiple selection boxes can exist simultaneously

Whether to clear the selection box when brushing ends

Style for selected data

Defines the style of selected data points

Opacity

Opacity of selected data points, range 0-1

Stroke color

Stroke width

Style for unselected data

Defines the style of unselected data points

Opacity

Opacity of unselected data points, range 0-1

Stroke color

Stroke width

X-axis, category axis, X-axis configuration; defines the X-axis of the chart, including its position, format, style, etc.

Whether the axis is visible

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

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

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

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

When autoHide is enabled, use autoHide, configured on autoHideSeparation

When autoHide is disabled, use sampling, configured on minGap

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

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

Axis label, auto-limit length; when label width exceeds the axis length, the excess is indicated by ellipses, and the full label is visible on hover. Only effective for category axes.

Axis label, maximum length for auto-limiting; when label text length exceeds the maximum length, the excess is indicated by ellipses, and the full label is visible on hover. Only effective 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 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

X-axis animation configuration

Animation duration

Animation easing function

Y-axis, numeric axis, Y-axis configuration; defines the Y-axis of the chart, including its position, format, style, etc.

Whether the axis is visible

Axis minimum value; takes priority over nice and zero

Axis maximum value; takes priority over nice and zero; if set to true, the maximum is automatically calculated based on the data range

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

Logarithmic base; only effective for numeric axes

Whether to automatically adjust the axis scale interval for better readability. When 'min' and 'max' are configured, this setting is ignored. Only applies to numeric axes.

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

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

Whether to automatically format numeric axis labels. Only applies to numeric axes. When 'autoFormat' is true, the 'numFormat' configuration is ignored.

Number formatting for numeric axes. Only applies to numeric axes; 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

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

X-axis sort configuration, supports sorting based on dimensions or measures, and custom sort order

Category axis sort configuration, supports sorting based on dimensions or measures, and custom sort order

Sort order, optional values are 'asc' or 'desc'

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

Custom sort order, which will be applied directly to the category axis

Legend sort configuration, supports sorting based on dimensions or measures, and custom sort order

Legend sort configuration, supports sorting based on dimensions or measures, and custom sort order; the sort array follows an order from left to right or from top to bottom

Sort order, optional values are 'asc' or 'desc'

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

Custom sort order, which will 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; the theme is a lower-priority functional configuration, containing general configurations shared by all chart types and specific configurations for individual chart categories. Built-in themes include light and dark, and users can customize themes through the Builder

Theme

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

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

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

Whether to display the crosshair rectangular area

Crosshair rectangular area color

Crosshair rectangular area label color

Whether to display the crosshair rectangular area label

Crosshair rectangular area label background color

Stacking corner radius for bar charts

Maximum width of the bar; can be a pixel value or a percentage string.

Rectangular primitive style; used to define the bar chart style, including color, borders, corner radius, etc.

Supports global style or conditional style configurations.

Data filter

If a 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 a 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 a dimension item

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

same as operator

Value of the dimension field, supports arrays

Animated filter (AI-generated code execution)

Implements complex data filtering logic via AI-generated JavaScript code

Suitable for Top N, statistical analysis, complex conditions, and other scenarios that are difficult to express with static selectors.

Core capabilities:

- Supports any complex data filtering conditions

- Uses built-in utility functions for data operations

- Safely executes in the browser environment (Web Worker sandbox)

Environment requirements: Only supports browser environment; Node.js environment will use fallback

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

Chart 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

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

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

- Must return an array of row index and field pairs: 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 a dimension item

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

same as operator

Value of the dimension field, supports arrays

Animated filter execution result (runtime field)

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

Whether the bar primitive (rectangle) is visible

Bar primitive (rectangle) color

Bar primitive (rectangle) color opacity

Bar primitive (rectangle) stroke color

Bar primitive (rectangle) stroke width

Bar primitive (rectangle) stroke style

Bar primitive (rectangle) corner radius

Bar primitive (rectangle) stroke opacity

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

Annotation point selector; used to select data points.

Dimension field, the ID of a dimension item

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

same as operator

Value of the dimension field, supports arrays

Animated filter (AI-generated code execution)

Implements complex data filtering logic via AI-generated JavaScript code

Suitable for Top N, statistical analysis, complex conditions, and other scenarios that are difficult to express with static selectors.

Core capabilities:

- Supports any complex data filtering conditions

- Uses built-in utility functions for data operations

- Safely executes in the browser environment (Web Worker sandbox)

Environment requirements: Only supports browser environment; Node.js environment will use fallback

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

Chart 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

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

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

- Must return an array of row index and field pairs: 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 a dimension item

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

same as operator

Value of the dimension field, supports arrays

Animated 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; typically set to 'right' so text appears on the left side of the annotation point, ensuring it remains within the visible area of the chart.

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

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

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

center: Text is centered on the annotation point; the center of the text aligns with the point.

Vertical text alignment; typically set to 'top' so text appears at the bottom of the annotation point, ensuring it remains within the visible area of the chart.

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

top: Text is at the bottom of the annotation point; the top edge of the text aligns with the point.

middle: Text is centered vertically; the middle of the text aligns with the point.

bottom: Text is at the top of the annotation point; the bottom edge of the text aligns with the point.

Background visibility

Background color

Background stroke color

Background stroke width

Background corner radius

Background padding

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

A negative value shifts the entire component upward; for example, -10 shifts the text and background up by 10 pixels.

A positive value shifts the entire component downward; for example, 10 shifts the text and background down by 10 pixels.

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

A negative value shifts the entire component to the left; for example, -10 shifts the text and background left by 10 pixels.

A positive value shifts the entire component to the right; for example, 10 shifts the text and background right by 10 pixels.

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

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

Animated filter (AI-generated code execution)

Calculate the annotation line value dynamically via AI-generated JavaScript code.

Suitable for scenarios where the annotation line position needs to be determined dynamically based on data, such as averages, maximums, quantiles, business lines, etc.

Only supports browser environments (requires Web Worker).

User's filtering requirement description (natural language)

AI-generated JavaScript filtering code

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

- Input parameters: data (array)

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

- Use case: Dynamic values required for annotation lines (horizontal, vertical)

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

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

Animated filter execution result (runtime field)

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

Annotation text

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

Text color

Vertical text alignment; typically not required.

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

top: Text is at the bottom of the reference line; the top edge aligns with the endpoint of the (vertical) annotation line.

middle: Text is centered on the reference line; the center aligns with the endpoint of the (vertical) annotation line.

bottom: Text is at the top of the reference line; the bottom edge aligns with the endpoint of the (vertical) annotation line.

Line visibility

Line color

Line width

Line style

Background visibility

Background color

Background stroke color

Background stroke width

Background corner radius

Background padding

Measure value annotation line (including average, maximum, minimum, etc.); displayed horizontally; defines the position, style, etc. Use this for lines corresponding to numeric values like averages.

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

Animated filter (AI-generated code execution)

Calculate the annotation line value dynamically via AI-generated JavaScript code.

Suitable for scenarios where the annotation line position needs to be determined dynamically based on data, such as averages, maximums, quantiles, business lines, etc.

Only supports browser environments (requires Web Worker).

User's filtering requirement description (natural language)

AI-generated JavaScript filtering code

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

- Input parameters: data (array)

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

- Use case: Dynamic values required for annotation lines (horizontal, vertical)

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

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

Animated filter execution result (runtime field)

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

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

Animated filter execution result (runtime field)

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

Annotation text

Text position

Annotation line label position (relative position of the label to the line).

Text color

Text font size

Text font weight

Text alignment; typically not required.

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

right: Text is on the left side of the reference line, right-aligned (horizontally) with the endpoint of the annotation line.

left: Text is on the right side of the reference line, left-aligned (horizontally) with the endpoint of the annotation line.

center: Text is centered on the reference line, center-aligned (horizontally) with the endpoint of the annotation line.

Vertical text alignment; typically not required.

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

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

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

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

background visibility

background color

background stroke color

background stroke width

background stroke width

background corner radius

background padding

Line visibility

Line visibility

Line color

:::::note{title=Description} Annotation area configuration; defines the chart's annotation area based on the selected data, including position, style, etc.

Depends on selected data for data marking.

Dimension field, the ID of a dimension item

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

Operator

- in: Select data items where the value of the dimension field is in the value

- not in: Select data items where the value of the dimension field is not in the value

same as operator

Value of the dimension field, supports arrays

Annotation text

Text position

Text color

Text font size

Text font weight

Text alignment; typically set to 'right' so text appears centered within the annotation area, ensuring it remains within the visible area of the chart.

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

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

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

center: Text is centered in the annotation area; the center of the text aligns with the area.

Vertical text alignment; typically set to 'top' so text appears at the bottom of the annotation area, ensuring it remains within the visible area of the chart.

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

top: Text is at the bottom of the annotation area; the top edge aligns with the area.

middle: Text is centered in the annotation area; the center aligns with the area.

bottom: Text is at the top of the annotation area; the bottom edge aligns with the area.

background visibility

background color

background stroke color

background stroke color

background stroke width

background corner radius

background corner radius

background padding

Annotation area color

Annotation area color opacity

Annotation area stroke color

Annotation area stroke width

Annotation area corner radius

Line type for the annotation area border

::: ined`

:::note{title=Description} background visibility

background color

background stroke color

background stroke color

background stroke width

background corner radius

background corner radius

background padding

Annotation area color

Annotation area color opacity

Annotation area stroke color

Annotation area stroke width

Annotation area corner radius

Line type for the annotation area border

Annotation area margin

Polynomial regression line

Polynomial regression line configuration, including the polynomial order, regression line style, etc.

Whether to enable

Regression line color

Used to set the regression line color; if not set, the chart's primary color is used by default.

Order of the polynomial regression

Regression line width

Used to set the width of the regression line, in pixels; defaults to 1.

Regression line style

Used to set the regression line style, such as solid or dashed; defaults to solid.

Regression line label text

Used to set the regression line label text; an empty string means no label is displayed.

Text color

Text font size

Text font weight

Whether to display the confidence interval

Confidence level setting for the confidence interval; defaults to 0.95 (95%).

Confidence interval color

Confidence interval opacity

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

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

Perspective chart dimension linkage configuration.

Whether to enable perspective chart dimension linkage.

Whether to display tooltips for all sub-charts corresponding to the dimensions.

Whether to display the label corresponding to the crosshair.

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