#Pie

Pie chart, suitable for showing the proportional relationship of single-dimension data, using sector area to represent each category's share.

Applicable scenarios:

- Show the proportional distribution of categorical data

- Emphasize the relationship between parts and the whole

- Proportional analysis with a small number of categories (recommended no more than 6)

Pie chart

Pie chart, showing the proportional relationship of single-dimension data

Dataset

A TidyData-compliant, already aggregated dataset used to define the chart data source and structure. User input does not need any preprocessing; VSeed has powerful data reshaping capabilities and reshapes the data automatically. Pie chart data is ultimately converted into 1 dimension and 1 measure.

Dimensions

All dimensions of a pie chart are merged with measure names when multiple measures exist into one dimension, mapped to angle, and displayed as legend items

Field ID corresponding to the dimension

Dimension alias

Dimension date format configuration

Time granularity, determines the date display precision

Channel to which the dimension is mapped:

• 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 pie chart are automatically merged into one measure and mapped to the radius axis. When multiple measures exist, measure names are merged with the remaining dimensions and displayed as legend items.

Measure ID, must be unique

Measure alias, duplicates allowed; when not set, alias defaults to id

Automatic number formatting, enabled by default, highest priority.

When autoFormat=true, it overrides all numFormat configurations.

When enabled, chart data labels and tooltips will automatically select the appropriate formatting based on measure values and locale.

Formatting rules: decimal numbers with compact notation enabled, minimum 0 decimal places, maximum 2 decimal places, automatic rounding, using the browser's Intl.NumberFormat implementation.

For example:

• locale=zh-CN: 749740.264 → 74.45万

• locale=en-US: 749740.264 → 744.5K

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

Note: To use custom formatting, you must explicitly set autoFormat=false; otherwise autoFormat will override this 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:

• angle: measure mapped to the angle 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. Specifies the field name for pagination, which must be a dimension.

Pagination field; specifies the field name for pagination, must be a dimension.

Current pagination value; specifies the value used to determine the current page.

Chart background color. 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 sector 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.

Label layout mode. Only effective for pie chart and donut chart when labelPosition is outside.

• arc: Layout labels along the arc.

• labelLine: Aligns labels at both ends, connecting sector graphics with labels via leader lines.

• edge: Aligns labels at both ends, connecting sector graphics with labels via leader lines, positioned close to the edges of the chart.

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.

Animation configuration

Chart animation configuration, with available effects constrained by chart type.

Whether to enable pie/donut/rose chart animation

Pie/donut/rose chart animation parameters

Pie/donut/rose chart appear animation configuration

Pie/donut/rose chart appear effects, supporting radial and scale animations

Whether to enable the current animation stage

Animation easing function

Animation duration, in milliseconds

Animation highlight or atmosphere color

Pie/donut/rose chart update animation configuration

Pie/donut/rose chart update effects, supporting radial animation

Whether to enable the current animation stage

Animation easing function

Animation duration, in milliseconds

Animation highlight or atmosphere color

Pie/donut/rose chart loop animation configuration

Whether to enable loop animation

Loop animation interval, in milliseconds

Pie/donut/rose chart loop animation configuration

Pie/donut/rose chart loop effects

Whether to enable the current animation stage

Animation easing function

Animation duration, in milliseconds

Animation highlight or atmosphere color

Pie/donut/rose chart atmosphere animation configuration

Atmosphere animation easing function

Atmosphere animation color

Chart theme. Themes are lower-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.

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