#Line

Line Chart, suitable for showing trends over time or ordered categories by connecting data points with line segments.

Applicable scenarios:

• Showing trends in time-series data.
• Comparing trends across multiple data series.
• Analyzing patterns of data growth or decline.

Line Chart, suitable for showing trends over time or ordered categories.

Dataset. Compliant with TidyData specification and already aggregated, defines the chart's data source and structure. User input does not require pre-processing; VSeed features powerful Data Reshape capabilities that handle formatting automatically. Line Chart data is ultimately converted to 2 dimensions and 1 measure.

Dimensions. The first dimension of the Line Chart is mapped to the X-axis. Remaining dimensions are merged with measure names (if multiple measures exist) to serve 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 a Line Chart are automatically merged into one measure and mapped to the Y-axis. When multiple measures exist, measure names are merged with remaining dimensions to serve 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~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 configuration.

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 a flat measure configuration, builds a tree-like measure structure. parentId points to the ID of the parent measure group, used for building the hierarchy.

Pagination configuration.

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. Default is transparent. 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 labels have higher priority; this config does not affect encoding labels.

Whether labels display measure value 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 labels have higher priority; this config does not affect encoding labels.

Whether labels display dimension names.

Displays all dimension labels.

Note: Encoding labels have higher priority; this config does not affect encoding labels.

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 (outline) color.

Label font color.

Whether to automatically invert the label font color based on the graphic element color.

Label position.

Whether the label overlap avoidance function is enabled.

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

Dimension field ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Same as operator.

Selective dimension values; supports arrays.

Dynamic filter (AI-generated code execution).

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

Key capabilities:

• Supports any complex data filtering conditions.

• Uses built-in utility functions for data operations.

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

Requirements: Supports only browser environments; Node.js environments will use the fallback.

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

Configuration for the chart dynamic filter.

Filter chart marks (columns, 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 parameter: data (array); each item includes 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, and field represents the field to be highlighted.

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

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

Dimension field ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Same as operator.

Selective dimension 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, and style.

Whether legend functionality is enabled.

Whether the legend border is enabled.

Legend font color.

Pagination icon color.

Pagination 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 position is horizontal (bottom, top, etc.), maxSize controls the number of columns. If position is vertical (left, right, etc.), maxSize controls the number of rows.

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

Whether tooltip functionality is enabled.

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

Whether region selection is enabled.

Brush type. Defines the selection box shape and direction:

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

• polygon: Polygon selection, allows drawing arbitrary shapes by clicking multiple points.

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

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

Selection mode, single or multiple. Defines the selection logic:

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

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

Whether to clear selection boxes after region selection ends.

Style for data within the selected region.

Opacity for selected data points, range 0-1.

Stroke color.

Stroke width.

Style for data outside the selected region.

Opacity for data points outside the selection, range 0-1.

Stroke color.

Stroke width.

X-axis configuration (discrete axis), used to define the chart's X-axis, including position, format, and style.

Whether the axis is visible.

Whether the axis is inverted; only effective for numeric axes.

Whether to force the axis to include 0. Overridden by min and max configurations; only effective for numeric axes.

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

Gap for automatic label hiding. If the gap between two text labels is less than autoHideGap, the label causing overlap is hidden. Only effective for discrete axes.

When autoHide is enabled, this sets autoHideSeparation. When autoHide is disabled, this sets the minimum gap for sampling.

Whether to automatically rotate labels when their width exceeds the axis length. Only effective for discrete axes.

Rotation angle range for automatically rotated labels. Only effective for discrete axes.

Whether to automatically limit label length. When a label exceeds the length, it is truncated with an ellipsis and the full label is shown on hover. Only effective for discrete axes.

Maximum length for automatically limited labels. When a label exceeds this length, it is truncated with an ellipsis and the full label is shown on hover. Only effective for discrete axes.

X-axis tick labels.

Whether labels are visible.

Label color.

Label font size.

Label font weight.

Label rotation angle.

X-axis line.

Whether the axis line is visible.

Axis line color.

Axis line width.

X-axis ticks.

Whether ticks are visible.

Whether ticks point inwards.

Tick color.

Tick size.

X-axis title.

Whether the title is visible.

Title text; defaults to following field configurations.

Title color.

Title font size.

Title font weight.

X-axis grid lines.

Grid line color.

Grid line width.

Grid line pattern.

X-axis animation configuration.

Animation duration.

Animation easing function.

Y-axis configuration (numeric axis), used to define the chart's Y-axis, including position, format, and style.

Whether the axis is visible.

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

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

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

Base for the logarithmic scale; only effective for numeric axes.

Whether to automatically adjust axis tick intervals for better readability. Overridden by min and max configurations; only effective for numeric axes.

Whether the axis is inverted; only effective for numeric axes.

Whether to force the axis to include 0. Overridden by min and max configurations; only effective for numeric axes.

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

Numerical formatting for the axis; only effective for numeric axes. Lower priority than autoFormat.

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

Number format ratio, cannot be 0

Number format symbol, e.g. %, ‰

Thousands separator for number formatting

Number format suffix

Number format prefix

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

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

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

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

Y-axis tick labels.

Whether labels are visible.

Label color.

Label font size.

Label font weight.

Label rotation angle.

Y-axis line.

Whether the axis line is visible.

Axis line color.

Axis line width.

Y-axis ticks.

Whether ticks are visible.

Whether ticks point inwards.

Tick color.

Tick size.

Y-axis title.

Whether the title is visible.

Title text; defaults to following field configurations.

Title color.

Title font size.

Title font weight.

Y-axis grid lines.

Grid line color.

Grid line width.

Grid line pattern.

Y-axis animation configuration.

Animation duration.

Animation easing function.

Vertical crosshair line.

A vertical line displayed when hovering over the chart to show precise values.

Crosshair line configuration, a type for displaying crosshairs (indicator lines) in charts.

Whether to show the crosshair line.

Crosshair line color.

Crosshair line label color.

Whether to show the crosshair line label.

Crosshair line label background color.

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

Discrete axis sorting configuration.

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

The field sorting relies on. Can be a dimension ID or measure ID.

Custom sort order to be applied directly to the discrete axis.

Legend sorting configuration. Supports sorting by dimensions or measures, and custom sort orders.

Sorting follows the order from left-to-right or top-to-bottom.

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

The field sorting relies on. Can be a dimension ID or measure ID.

Custom sort order applied directly to the legend. Ascending follows left-to-right or top-to-bottom; descending follows right-to-left or bottom-to-top.

Chart theme. Themes are low-priority configurations containing general settings shared across all chart types and specific settings shared within a chart category.

Light and dark themes are built-in; users can define custom themes via the Builder.

Point style configuration. Used to define the style of data points in the chart, including colors, borders, etc.

Supports global styling or conditional styling based on selectors.

If conditional selectors are provided, the style maps to matching data. Otherwise, styles apply globally.

Data selector. If configured, provides matching capabilities for numerical values, partial data items, dimensions, or measures. If not set, styles apply globally.

Dimension field ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator (same as operator).

Dimension values for selection; supports arrays.

Dynamic filter (AI-generated code execution).

Implement complex data filtering via AI-generated JavaScript code. Useful for scenarios like Top N, statistical analysis, or complex conditions that static selectors cannot express.

Key capabilities:

• Supports any complex data filtering conditions.

• Uses built-in utility functions for data operations.

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

Requirements: Supports only browser environments; Node.js environments will use the fallback.

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

User's filtering requirement description (natural language).

AI-generated JavaScript filtering code.

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

• Input parameter: data (array); each item includes 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, and field represents the field to be highlighted.

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

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

Dimension field ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator (same as operator).

Dimension values for selection; supports arrays.

Dynamic filter execution result (runtime field). Written during the prepare() phase; read-only at runtime.

Whether data points are visible.

Point size.

Point color.

Point color opacity.

Point border color.

Point border width.

Point border style.

Line style configuration. Used to define the style of lines in the chart, including color, transparency, curvature, etc.

Supports global styling or conditional styling based on selectors.

If conditional selectors are provided, the style maps to matching data. Otherwise, styles apply globally.

Data selector. If configured, provides matching capabilities for numerical values, partial data items, dimensions, or measures. If not set, styles apply globally.

Dimension field ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator (same as operator).

Dimension values for selection; supports arrays.

Dynamic filter (AI-generated code execution).

Implement complex data filtering via AI-generated JavaScript code. Useful for scenarios like Top N, statistical analysis, or complex conditions that static selectors cannot express.

Key capabilities:

• Supports any complex data filtering conditions.

• Uses built-in utility functions for data operations.

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

Requirements: Supports only browser environments; Node.js environments will use the fallback.

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

User's filtering requirement description (natural language).

AI-generated JavaScript filtering code.

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

• Input parameter: data (array); each item includes 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, and field represents the field to be highlighted.

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

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

Dimension field ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator (same as operator).

Dimension values for selection; supports arrays.

Dynamic filter execution result (runtime field). Written during the prepare() phase; read-only at runtime.

Whether the line segments are visible.

Whether the line segments are smooth (curved).

Line color.

Line color opacity.

Line width.

Annotation point configuration. Defining highlight points based on selected data, including position, format, and style.

Selector used to identify specific data points for annotation.

Dimension field ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator (same as operator).

Dimension values for selection; supports arrays.

Dynamic filter (AI-generated code execution).

Annotation text.

Text color.

Text font size.

Text font weight.

Text alignment. Typically, setting to 'right' places text to the left of the point, keeping it within the chart area.

• 'right': Text to the left of the point, right-edge aligned.
• 'left': Text to the right of the point, left-edge aligned.
• 'center': Centered on the point.

Text vertical baseline. Typically, setting to 'top' places text below the point for visibility.

• 'top': Text below the point, top-edge aligned.
• 'middle': Centered vertically.
• 'bottom': Text above the point, bottom-edge aligned.

Whether text background is visible.

Background color.

Background border color.

Background border width.

Background corner radius.

Background padding.

Vertical offset for the entire annotation component. Negative values move up; positive values move down.

Horizontal offset for the entire annotation component. Negative values move left; positive values move right.

Vertical annotation line, typically used for marking specific values along the dimension axis. Supports custom positioning and styling.

Fixed X-value for the vertical annotation line. Accepts dimension values or numeric coordinates depending on the axis type.

Dynamic filter (AI-generated code execution). Used to calculate annotation line positions (e.g. mean, max, quantiles) dynamically based on data. Requires browser environment (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 parameter: data (array).

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

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

Annotation text.

Relative position of the label text to the annotation line.

Text color.

Text font size.

Text font weight.

Horizontal text alignment relative to the vertical line.

Vertical text alignment relative to the endpoint of the vertical line.

Whether the annotation line is visible.

Line color.

Line width.

Line style.

Whether text background is visible.

Background color.

Background border color.

Background border width.

Background corner radius.

Background padding.

Horizontal annotation line (e.g. mean, max, min), used to mark specific values along the measure axis.

Fixed Y-value for the horizontal annotation line. Accepts dimension values or numeric coordinates depending on the axis type.

Dynamic filter used to calculate the annotation line value dynamically (e.g. average sales, peak value).

Annotation text.

Position of the label relative to the line.

Horizontal alignment relative to the endpoint of the horizontal line.

Vertical alignment relative to the line itself.

Whether to enable splitting the main line into two segments (e.g. highlighting above/below threshold).

Main color for segments exceeding the threshold.

Main color for segments below the threshold.

Annotation area configuration. Defining highlighted regions based on selected data, including position, format, and style.

Data selector used to identify the range for the annotation area.

Dimension field ID.

Operator:

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

• not in: Select data items where the dimension field value is not in the 'value' list.

Operator (same as operator).

Selective dimension values; supports arrays.

Annotation text within the area.

Text position within the area.

Text color.

Text alignment. Setting to 'center' ensures the title appears centered within the area.

Vertical alignment.

Background color of the annotation area.

Opacity of the area.

Dash pattern for the area border.

Outer padding for the annotation area.

Dimension linkage configuration. When multiple charts or measures are combined, hovering over a dimension value highlights matching data across all charts.

Whether to enable dimension linkage.

Whether to show tooltips for all linked dimension points.

Whether to show crosshair labels for linked points.

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